jQuery无限加载更多插件Infinite Ajax Scroll支持图片延迟加载
ajax加载更多内容相当普遍了，萨龙龙在开发主题的过程中找了很多方法都不尽完美，jQuery.ias插件是相对完美的一款。
ias全称是Infinite Ajax Scroll，无限的ajax滚动，是一款jQuery滚动ajax分页插件，当页面滚动到容器可见部分将自动异步加载数据，萨龙龙在开发网站时都会将这个插件集成到主题中。
插件的集成很简单，分以下几个步骤：
1、网站中必须实现分页，需要有下一页链接，WP网站可以通过分页代码或插件来实现；
2、页面中引用jquery.ias.min.js
3、插件参数：container容器，所有文章的最外层元素，如下代码中的“content”：
- <section class="content">
- <article class="post"></article>
- <article class="post"></article>
- <article class="post"></article>
- <article class="post"></article>
- </section>
4、插件参数：item项，每一篇文章的最外层元素，如上代码中的“post”
5、插件参数：wp-pagenavi分页，分页代码最外层元素，如下代码中的“wp-pagenavi”：
- <div class="wp-pagenavi">
- <span class="pages">第 1 页，共 2 页</span>
- <span class="current">1</span>
- <a href="#" class="page">2</a>
- <a href="" rel="next" class="nextpostslink">下一页</a>
- </div>
6、插件参数：next下一页，分页代码中的下一页按钮或链接，如上代码中的“nextpostslink”
7、插件提示：加载更多，加载完成以及自动加载多少次后将手动点击加载
注意：加载次数(offset)如果填写2将自动加载一次，3将自动加载两次，所以offset-1等于自动加载的次数。有些文章介绍加载次数是offset+1，萨龙龙使用过程中都是offset-1次。
8、添加JS代码到你的JS文件中，代码如下：
- <script type="text/javascript">
- var ias = $.ias({
- container: ".content", //包含所有文章的元素
- item: ".post", //文章元素
- pagination: ".wp-pagenavi", //分页元素
- next: ".wp-pagenavi a.nextpostslink", //下一页元素
- });
- ias.extension(new IASTriggerExtension({
- text: '加载更多', //此选项为需要点击时的文字
- offset: 2, //设置此项后，到 offset-1 页之后需要手动点击才能加载，取消此项则一直为无限加载
- }));
- ias.extension(new IASSpinnerExtension());
- ias.extension(new IASNoneLeftExtension({
- text: '已经加载完成！', // 加载完成时的提示
- }));
- ias.on('rendered', function(items) {
- $(".content img").lazyload({
- effect: "fadeIn",
- failure_limit : 10
- }); //这里是你调用Lazyload的代码
- })
- </script>
要在加载更多后显示的文章中支持图片延迟加载，首选需要添加此图片延迟加载功能。同时jQuery ias无限加载更多功能同样合适商城产品列表。
[successbox]萨龙龙的主题后台都添加了插件提示文本与加载次数，ias插件使用相当的方便，也很实用，大赞。[/successbox][scbutton link="https://github.com/webcreate/infinite-ajax-scroll" target="blank" variation="blue"]IAS项目下载[/scbutton][scbutton link="https://salongweb.com/category/web-tech" target="blank" variation="yellow"]萨龙网络演示[/scbutton]
