页面内容动态加载插件 Infinite Ajax Scroll

网站内容的加载一般是通过分页的方式来完成，现今很多网站也使用动态的方式来加载页面内容，就是当浏览页面内容到底部的时候动态加载后续的内容（分页内容），这种功能是通过 Ajax 技术实现的，而且有成熟的插件可以使用，本篇文章就分享一款这样的插件 infinite ajax scroll，介绍其使用方法以及在 WordPress 中的应用。

Infinite Ajax Scroll 是一款 jQuery 插件，所以使用之前需要引入 jQuery 库，然后再引入 infinite ajax scroll JavaScript 脚本文件，如何在 WordPress 中引入 JavaScript 脚本请参考这篇文章。

使用 infinite ajax scroll 动态装载内容的 Html 页面代码模式如下所示：

<div id="posts">
    <div class="post">...</div>
    <div class="post">...</div>
</div>

<div id="pagination">
    <a href="/page2/" class="next">next</a>
</div>

其中 id=”post” 的 div 标签（容器）内就是显示文章的代码，id=”pagination” 的 div 标签里是分页链接代码，点击该链接就跳转到对应的页面。符合这样一种页面内容显示模式的代码就可以用 infinite ajax scroll 来动态装载分页内容了，示例代码如下：

var ias = jQuery.ias({
  container:  '#posts',
  item:       '.post',
  pagination: '#pagination',
  next:       '.next'
});

那么在 WordPress 中使用该插件实现动态装载文章内容的方法也很简单，就是把显示文章页面代码中的 Css 类名替换一下上面示例代码中对应的类名即可，代码如下：

var ias = $.ias({
  container: "#content",
  item: ".post",
  pagination: ".navigation",
  next: ".next",
});

另外，infinite ajax scroll 还提供一些个性化的装载效果，代码如下：

//在装载页面内容时显示一个装载图标
ias.extension(new IASSpinnerExtension());
//显示 x 页的内容后出现一个链接按钮，点击后装载后面的内容
ias.extension(new IASTriggerExtension({offset: x}));
//显示到分页尾部时，出现一个文本提示
ias.extension(new IASNoneLeftExtension({text: "没有了"}));

使用该插件也可以动态装载评论的内容，实现方法也是一样的。
Infinite Ajax Scroll 插件的使用许可是，对于非商业用途可以免费使用，商业用途需要购买使用许可，具体情况请访问官网。