使用 jQuery ias 懒加载插件实现无限下拉

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插件参数

var ias = $.ias({
    container: "#main",
    item: ".card-plain",
    pagination: "nav-links",
    next: ".nav-links .next a",
});
ias.extension(new IASSpinnerExtension({
    src: "/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
    });
})

列表模板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="http://localhost/index_2.html" title="第2页">2</a>
      <a class="page-numbers" href="http://localhost/index_3.html" title="第3页">3</a>

      <span class="next"> //next: ".nav-links .next a"
	<a class="page-numbers" href="http://localhost/index_2.html" title="下一页"><i class="fa fa-angle-right"></i></a>
      </span>
      	<a class="page-numbers" href="http://localhost/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的代码
})