infinite ajax scroll 实现页面无限滚动加载

这个博客自开始使用无限滚动至今已有好长时间了。最开始用的是 infinite-scroll 这个插件来实现无限滚动,这个插件有很长时间没有更新了,jQuery 在这期间都迭代几个版本了,作者大概也不想花心思在这个插件上面了,说实话尽管如此它仍能很好地忠于本职工作,最近偶然用了一次 IE8,无限滚动竟然不能正常工作了,这可不行。并不打算弄清楚具体是什么原因导致的了,只是想换一种实现方式。

于是,找到了 JScroll,这个比 infinite-scroll 要轻一些,功能和使用方法类似,有一个不好地方是 JScroll 在实现分页的时候会在每页容器内另加一层 div 包围,同时 IE8 上扔然有些小不完美,勉强也可以接受,在本地调试成功。谁知上传到服务器后特么的死活不滚了,还找不原因,看代码啥的也没问题,到底是肚子痛还是四肢麻木无从知晓,真是有缘无分(后来用了接下来的这个插件才找出来原因:问题出在 nginx 配置的一个插件的设置上),这给了我认识下面这个插件的机会。

周二晚上回家的路上,无意找到了 infinite ajax scrollgithub地址),简称 ias,这是个商业插件,非盈利性网站可免费使用,最新版本是v3.0.1,用法跟前面两个相似:

第一步:

1、下载 jquery-ias.min.js,把jquery-ias.min.js文件放到主题目录下的 js 文件夹里。

2、查看主题是否已经加载了 jQuery 库,如果没有那么打开主题目录下的footer.php文件,把下面一行代码粘贴在</body>标签之前,这是 cloudflare 免费提供的 jQuery 公共库,好处是支持 https:

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

3、接着加载jquery-ias.min.js:把下面一行代码放到上面代码的下面。

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ias.min.js" type="text/javascript"></script>

第二步:

查看页面的 div 结构,目的是为第三步做准备:

<div id="content">
	<div class="post">日志一</div>
	<div class="post">日志二</div>
	<div class="post">日志三</div>
</div>
<div class="pagination">
	<a href="/page2/" >next</a>
</div>

第三步:

infinite ajax scroll 共有4个必要的配置参数,分别是:containeritempaginationnextdelaynegativeMargin可选,不建议修改)
并且需要和第二步 html 代码里的 id 或 class 做如下的映射关系方可正常工作:

container 对应 #content
item 对应 .post
pagination 对应 #pagination
next 对应 .next

映射完毕,得到如下的代码,放到第一步<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ias.min.js" type="text/javascript"></script>所在行的后面:

<script type="text/javascript">
	var ias = $.ias({
		container: "#content",
		item: ".post",
		pagination: ".navigation",
		next: ".navigation a",
	});
</script>

添加完毕,刷新一下即可无限滚动了。

这个插件还支持扩展

半自动加载,更改手动加载提示文字

启用后默认一滚到底,如果想搞点个性的也是可以的,如从第五页开始手动加载offset: 5,手动加载的提示文字为加载更多...,那么代码如下

ias.extension(new IASTriggerExtension({
	offset: 5,
	text: '加载更多&hellip;',
	html: '<div class="ias-trigger ias-trigger-prev bee"><a>{text}</a></div>'
}));

更改 gif 图片:

ias.extension(new IASSpinnerExtension({
	src: "gif图片地址",
	html: '<div class="ias-spinner bee"><img src="{src}"/></div>'
}));

更改末尾的提示文字:

ias.extension(new IASNoneLeftExtension({
	text: '已到结尾',
	html: '<div class="ias-trigger ias-noneleft bee">{text}</div>'
}));

把上面的扩展代码添加到第三步</script>前面就成了。

除了滚动日志列表,还可以滚动评论,滚动文章内容。

参考插件网站获取更多个性设置:http://infiniteajaxscroll.com

将 gif 转换成代码内嵌到代码中

上面更改 gif 图片时会用到 gif 的路径地址,特别是在 js 文件中是很不方便的,可以把 gif 图片通过 base64 编码转换成一串代码(data URI)内嵌到代码中,通过浏览器访问的时候,会把代码解读还原成图片,很方便,这里有一个在线转换服务,可以转换 JPG、PNG、GIF 或 BMP 格式的图像文件:
https://www.base64-image.de

优点:自然是免去更改文件位置带来的麻烦,减少 http 请求。
缺点:IE8 以下(IE6、7,不包括IE8)的浏览器不支持,IE8 只能支持最多 32KB 的 data URI。

回复 Shrek 取消回复

评论(5)

  1. pan

    自动翻页的时候, 如果遇到从服务器拉取分页内容的时候, URL地址怎么修改呢? 现在应该是一个静态的。。。

    1. Shrek

      @pan 即将发布的3.0版本会解决当前URL静止不变的这个问题

  2. Pingback给博客做了一些调整 – 木瓜园
  3. Betty

    插件于我,是能不用就不用了。
    多用一个插件等于给服务器多增加一个后门的危险。

    真要看你旧文章的,手动点个第二页、或者直接点个第五页、第八页的也不是问题。

    你用自动加载显示文章,反而不那么方便别人看你的旧文章吧?
    就像我吧……有时候看到别人博客上有显示N页,我就会直接去点最后一页来看看(也就是别人第一篇文章的所在)

    1. Shrek

      @Betty 这个是jQuery插件,跟wordpress插件不一样。