jQuery ias插件使用

        jQuery ias是流式分页插件，随着用户滚轴的滚动而自动去加载下一页数据。网上也有很多的教程，但是笔者认为在交互方面还需强调一下。
1、插件下载地址
        https://plugins.jquery.com/ias/ 
2、应用示例

        笔者先用一个简单的例子来展示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