在做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页的内容。
评论抢沙发