ajax 加载更多内容相当普遍了，笔者在开发主题的过程中找了很多方法都不尽完美，jQuery.ias 插件是相对完美的一款。

ias 全称是 Infinite Ajax Scroll，无限的 ajax 滚动，是一款 jQuery 滚动 ajax 分页插件，当页面滚动到容器可见部分将自动异步加载数据，笔者在开发网站时都会将这个插件集成到主题中。

插件的集成很简单，分以下几个步骤：

1 、网站中必须实现分页，需要有下一页链接，WP 网站可以通过分页代码或插件来实现；

2 、页面中引用 jquery-ias.min.js

3 、插件参数：container 容器，所有文章的最外层元素，如下代码中的 「content」：

  1. <section class="content">
  2.     <article class="post"></article>
  3.     <article class="post"></article>
  4.     <article class="post"></article>
  5.     <article class="post"></article>
  6. </section>

4 、插件参数：item 项，每一篇文章的最外层元素，如上代码中的 「post」

5 、插件参数：wp-pagenavi 分页，分页代码最外层元素，如下代码中的 「wp-pagenavi」：

  1. <div class="wp-pagenavi">
  2.     <span class="pages"> 第 1 页，共 2 页</span>
  3.     <span class="current">1</span>
  4.     <a href="#" class="page">2</a>
  5.     <a href="" rel="next" class="nextpostslink"> 下一页</a>
  6. </div>

6 、插件参数：next 下一页，分页代码中的下一页按钮或链接，如上代码中的 「nextpostslink」

7 、插件提示：加载更多，加载完成以及自动加载多少次后将手动点击加载

注意：加载次数 (offset) 如果填写 2 将自动加载一次，3 将自动加载两次，所以 offset-1 等于自动加载的次数。有些文章介绍加载次数是 offset+1，笔者使用过程中都是 offset-1 次。

8 、添加 JS 代码到你的 JS 文件中，代码如下：

  1. <script type="text/javascript">
  2.     var ias = $.ias({
  3.         container: ".content",
  4.         item: ".post",
  5.         pagination: ".wp-pagenavi",
  6.         next: ".wp-pagenavi a.nextpostslink",
  7.     });
  9.     ias.extension(new IASTriggerExtension({
  10.         text: '加载更多',
  11.         offset: 2,
  12.     }));
  13.     ias.extension(new IASSpinnerExtension());
  14.     ias.extension(new IASNoneLeftExtension({
  15.         text: '已经加载完成！',
  16.     }));
  17.     ias.on('rendered', function(items) {
  18.         $(".content img").lazyload({
  19.             effect: "fadeIn",
  20.         failure_limit : 10
  21.         });
  22.     })
  23. </script>

要在加载更多后显示的文章中支持图片延迟加载，首选需要添加此图片延迟加载功能。同时 jQuery ias 无限加载更多功能同样合适商城产品列表。

 

后台都添加了插件提示文本与加载次数，ias 插件使用相当的方便，也很实用，大赞。