笔者先用一个简单的例子来展示ias的基本用法。首先需要引入JS如下：
<script src="/blog/js/jquery.ias.js"></script> 其中HTML网页中需包含类似如下内容： <div class="content"> <!-- 分页开始 --> <article class="excerpt excerpt-1"> <header><a class="cat" href="program">ias<i></i></a> <h2><a href="" target="_blank" title="">ias使用方法</a></h2> </header> <p class="meta"> <time class="time"><i class="glyphicon glyphicon-time"></i>2017</time> <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共99人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i>23个不明物体</a></p> <p class="note">ias使用... </p> </article> <article class="excerpt excerpt-1"> <header><a class="cat" href="program">ias<i></i></a> <h2><a href="" target="_blank" title="">ias使用方法</a></h2> </header> <p class="meta"> <time class="time"><i class="glyphicon glyphicon-time"></i>2017</time> <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共99人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i>23个不明物体</a></p> <p class="note">ias使用... </p> </article> <!-- 分页结束 --> </div> <nav class="pagination" style="display: none;"> <ul> <li class="next-page"><a href="/article/index?pageNo={* pageNo *}">下一页</a></li> </ul> </nav> 如上所示，HTML中需要有两大要素：分页数据、翻页标签。其中一般来说带有分页URL的模块，都是隐藏的，以满足页面美观需要。 然后就是加入JS代码如下： jQuery.ias({ history: false, container : '.content', item: '.excerpt', pagination: '.pagination', next: '.next-page a', trigger: '查看更多', loader: '<div class="pagination-loading"><img src="/blog/images/loading.gif" /></div>', triggerPageThreshold: 5, onRenderComplete: function() { $('.excerpt .thumb').lazyload({ placeholder: '/blog/images/occupying.png', threshold: 400 }); $('.excerpt img').attr('draggable','false'); $('.excerpt a').attr('draggable','false'); } }); 下面详细的介绍一下相关的参数含义： container：分页数据的上一层标签定位，这里指的是class='content'的标签。item：在container中的一条条的分页数据的定位标识，这里指的是class='excerpt'的标签。pagination：分页模块的顶层标签，这里指的是class='pagination'的标签，插件会自动将其隐藏。next：用以获取下一页的分页连接，这里指的是class='next-page'下面的a标签。trigger：当分页自动加载到一定页数后，会触发手动分页。该参数就是其展示值。如果不设置，则会显示默认值。loader：自动加载器内容，是一个html标签。如果不设置，则会显示默认值。triggerPageThreshold：自动加载的数量。如上所示，当触发自动加载时，则会自动加载5页的内容。 其他参数请参见官方文档： https://infiniteajaxscroll.com/docs/overview.html 3、注意事项 在进行AJAX分页的时候，返回的分页数据是全量的第二页数据。意思就是除了有分页的内容外，还有页面的其他部分内容。这里虽然返回的是全量的下一页数据，但是页面并没有全量刷新。（但是笔者认为，这样的分页会浪费一些服务器资源）链接：http://moguhu.com/article/detail?articleId=17
