jquery-ias,全称 Infinite Ajax Scroll  简称 ias,无限的ajax滚动,是一款jQuery滚动ajax分页插件,当页面滚动到容器可见部分将自动异步加载数据。本插件适用于动静态网站,集成简单,分以下几个步骤:

页面中引用jquery.js 与 jquery-ias.js

<script src='/jquery.js'></script>

//jquery.js库版本必须大于1.6

<script src="/jquery-ias.min.js"></script>

在页面中写入Javascript插件参数

<script>    
        var ias = $.ias({
            container: "#main",
            item: ".card-plain",
            pagination: "nav-links",
            next: ".nav-links .next a",
        });

        ias.extension(new IASSpinnerExtension({
            src: "https://cdn.rongkeji.cn/zb_users/theme/rongkeji/image/loading.gif",
            //此选项为加载时缓冲图片    
            html: '<p style="text-align: center;"><img src="{src}" alt="正在加载..."/></p>'
        }));

        ias.extension(new IASTriggerExtension({
            text: '点击加载更多内容',
            html: '<div class="ias-trigger"><a>{text}</a></div>',
            offset: 2,
        }));

        ias.extension(new IASNoneLeftExtension({
            text: '已经加载完成!',
            // 加载完成时的提示    
            html: '<div class="ias-trigger"><a>{text}</a></div>',
        }));
        ias.on('rendered', function (items) {
            $("img").lazyload({
                effect: "fadeIn",
                failure_limit: 10
            });
        })   
</script>

列表模板html代码示范

<div id="main" class="list-home list-grid list-grid-padding"> //container: "#main"
<div class="card-plain">列表内容</div> //item: ".card-plain"
<nav class="navigation pagination">
  <nav class="navigation pagination" role="navigation">
    <div class="nav-links" style="display: none"> //pagination: "nav-links"
      <span class="page-numbers current">1</span>
      <a class="page-numbers" href="https://rongkeji.cn/index_2.html" title="第2页">2</a>
      <a class="page-numbers" href="https://rongkeji.cn/index_3.html" title="第3页">3</a>

      <span class="next"> //next: ".nav-links .next a"
	<a class="page-numbers" href="https://rongkeji.cn/index_2.html" title="下一页"><i class="fa fa-angle-right"></i></a>
      </span>
      	<a class="page-numbers" href="https://rongkeji.cn/index_4.html" title="最后一页"><i class="fa fa-angle-double-right"></i></a>
    </div>
  </nav>
</nav>
</div>

要在加载更多后显示的文章中支持图片延迟加载,需要添加此图片延迟加载功能,没有延迟加载图片的不需要理会

ias.on('rendered', function (items) {
    $(".content img").lazyload({
        effect: "fadeIn",
        failure_limit: 10
    }); //这里是你调用Lazyload的代码
})