这个博客自开始使用无限滚动至今已有好长时间了。最开始用的是 infinite-scroll 这个插件来实现无限滚动，这个插件有很长时间没有更新了，jQuery 在这期间都迭代几个版本了，作者大概也不想花心思在这个插件上面了，说实话尽管如此它仍能很好地忠于本职工作，最近偶然用了一次 IE8，无限滚动竟然不能正常工作了，这可不行。并不打算弄清楚具体是什么原因导致的了，只是想换一种实现方式。
于是，找到了 JScroll，这个比 infinite-scroll 要轻一些，功能和使用方法类似，有一个不好地方是 JScroll 在实现分页的时候会在每页容器内另加一层 div 包围，同时 IE8 上扔然有些小不完美，勉强也可以接受，在本地调试成功。谁知上传到服务器后特么的死活不滚了，还找不原因，看代码啥的也没问题，到底是肚子痛还是四肢麻木无从知晓，真是有缘无分（后来用了接下来的这个插件才找出来原因：问题出在 nginx 配置的一个插件的设置上），这给了我认识下面这个插件的机会。
周二晚上回家的路上，无意找到了 infinite ajax scroll（github地址），简称 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个必要的配置参数，分别是：container、item、pagination和next（delay和negativeMargin可选，不建议修改）
并且需要和第二步 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: '加载更多…',
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。
