全名:infinite-ajax-scroll
https://docs.infiniteajaxscroll.com/reference/events
引入
<script src="/jquery.ias.js"></script>
HTML
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
<div class="pagination">
<a href="page1.html" class="pre">上一页</a>
<a href="page3.html" class="next">下一页</a>
</div>
JS
jQuery.ias({
container: '.container ',
item: '.item ',
pagination: '.pagination',
next: '.next',
trigger: '查看更多',
loader: '<div class="pagination-loading"><img src="//www.tianlunvip.com/wp/wp-content/themes/lunone/images/loading.gif" /></div>',
triggerPageThreshold: 10, // 请求 10 页数据(当滚动到底部的时候才会请求)
onRenderComplete: function() {
.... 加载完成后动作
}
});
属性
<span style="color: #0000ff;">container:</span>分页数据追加的容器
<span style="color: #0000ff;">item:</span>分页数据项
<span style="color: #0000ff;">pagination:</span>原始分页数据容器,加载数据时被隐藏
<span style="color: #0000ff;">next:</span>下一页的链接标签,获取下一页地址
<span style="color: #0000ff;">trigger:</span>手动加载时显示的提示文本
<span style="color: #0000ff;">loader:</span>加载数据时显示的动画
<span style="color: #0000ff;">triggerPageThreshold:</span>自动加载页数,自动加载完后,若还有数据,会变成手动
<span style="color: #0000ff;">onRenderComplete:</span>数据加载完成后执行的事件