[![jQuery无限加载更多插件Infinite Ajax Scroll支持图片延迟加载](https://pic.salongweb.com/2015/06/ias.jpg)](https://pic.salongweb.com/2015/06/ias.jpg "jQuery无限加载更多插件Infinite Ajax Scroll支持图片延迟加载")ajax加载更多内容相当普遍了，萨龙龙在开发[主题](https://api.salongweb.com/portfolio)的过程中找了很多方法都不尽完美，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. });
8. 
9. ias.extension(new IASTriggerExtension({
10. text: ‘加载更多’, //此选项为需要点击时的文字
11. offset: 2, //设置此项后，到 offset-1 页之后需要手动点击才能加载，取消此项则一直为无限加载
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. }); //这里是你调用Lazyload的代码
22. })
23. </script>

要在加载更多后显示的文章中支持图片延迟加载，首选需要添加此图片延迟加载功能。同时jQuery ias无限加载更多功能同样合适商城产品列表。
\[successbox\][萨龙龙](https://yfdxs.com/sa-longlong)的[主题](https://api.salongweb.com/portfolio)后台都添加了插件提示文本与加载次数，ias插件使用相当的方便，也很实用，大赞。\[/successbox\]\[scbutton link=”https://github.com/webcreate/infinite-ajax-scroll” target=”blank” variation=”blue”\]IAS项目下载\[/scbutton\]\[scbutton link=”https://api.salongweb.com/category/web-tech” target=”blank” variation=”yellow”\]萨龙网络演示\[/scbutton\]