wordpress分页数据无限加载插件jquery.ias.js的使用

2020年1月16日 飞飞 阅读(1.68K)
知识付费主题,优惠促销中:xx-blog主题

在做wordpress分页时,希望随着用户滚轴的滚动,而自动加载下一页的数据,那么就可以用到这个插件jquery.ias.js。
ias的全称是Infinite Ajax Scroll,无限ajax滚动加载插件。

使用方法

1、引入jquery.ias.js

<script src="/js/jquery.ias.js"></script>

2、页面的html结构

<div class="content">
<article class="excerpt">列表一</article>
<article class="excerpt">列表二</article>
<article class="excerpt">列表三</article>
</div>
<div class="pagination">
<ul>
<li class="next-page"><a href="#">页码</a></li>
</ul>
</div>

3、添加对于的js

var ias = $.ias({
thresholdMargin: 400,
triggerPageThreshold : 5,
history : true,
container : '.content',
item : '.excerpt',
pagination : '.pagination',
next : '.next-page a'
});

ias.extension(new IASTriggerExtension({
offset: 0,
text: '加载更多···',
html: '<div class="ias-trigger ias-trigger-prev bee" style=" text-align: center; margin-top: 10px; "><a class="btn btn-primary">{text}</a></div>'
}));

ias.extension(new IASSpinnerExtension({
src: FFUI.uri+'/images/loading.gif',
html: '<div class="pagination-loading"><img src="{src}"/></div>'
}));

也可以用下面的js

jQuery.ias({
history: false,
container : '.content',
item: '.excerpt',
pagination: '.pagination',
next: '.next-page a',
trigger: '查看更多',
loader: '<div class="pagination-loading"><img src="/blog/images/loading.gif" /></div>',
triggerPageThreshold: 5,
onRenderComplete: function() {
$('.excerpt .thumb').lazyload({
placeholder: '/blog/images/occupying.png',
threshold: 400
});
$('.excerpt img').attr('draggable','false');
$('.excerpt a').attr('draggable','false');
}
});

4、代码详细解释

container:分页数据的上一层标签定位,这里指的是class=’content’的标签。
item:在container中的一条条的分页数据的定位标识,这里指的是class=’excerpt’的标签。
pagination:分页模块的顶层标签,这里指的是class=’pagination’的标签,插件会自动将其隐藏。
next:用以获取下一页的分页连接,这里指的是class=’next-page’下面的a标签。
trigger:当分页自动加载到一定页数后,会触发手动分页。该参数就是其展示值。如果不设置,则会显示默认值。
loader:自动加载器内容,是一个html标签。如果不设置,则会显示默认值。
triggerPageThreshold:自动加载的数量。如上所示,当触发自动加载时,则会自动加载5页的内容。


关注微信公众号『xx主题网

第一时间了解最新网络动态
关注博主不迷路~

未经允许不得转载:xx主题网 » wordpress分页数据无限加载插件jquery.ias.js的使用
分享到:

评论抢沙发

要发表评论,您必须先

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

扫码关注微信公众号

扫描关注xx主题网