jQuery无限加载更多插件Infinite Ajax Scroll支持图片延迟加载

10年前

2.18W

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://api.salongweb.com/category/web-tech" target="blank" variation="yellow"]萨龙网络演示[/scbutton]