在做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页的内容。
