jQuery.ias

全名：infinite-ajax-scroll

GitHub 项目地址

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() {
    ....  加载完成后动作
    }
});

属性

container：分页数据追加的容器

item：分页数据项

pagination：原始分页数据容器，加载数据时被隐藏

next：下一页的链接标签，获取下一页地址

trigger：手动加载时显示的提示文本

loader：加载数据时显示的动画

triggerPageThreshold：自动加载页数，自动加载完后，若还有数据，会变成手动

onRenderComplete：数据加载完成后执行的事件

转载请注明出处：吖Go创意 » jQuery.ias