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

属性

<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>数据加载完成后执行的事件

转载请注明出处：吖Go博客 » jQuery.ias