jQuery ias插件使用

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

        笔者先用一个简单的例子来展示ias的基本用法。首先需要引入JS如下：

        其中HTML网页中需包含类似如下内容：

    
      
      

        
ias
          
ias使用方法
        
        

          2017
           共99人围观 23个不明物体
        
ias使用... 
      
      

        
ias
          
ias使用方法
        
        

          2017
           共99人围观 23个不明物体
        
ias使用... 
      
      
  

      

        

          
下一页
        
      

        如上所示，HTML中需要有两大要素：分页数据、翻页标签。其中一般来说带有分页URL的模块，都是隐藏的，以满足页面美观需要。
        然后就是加入JS代码如下：

jQuery.ias({
	history: false,
	container : '.content',
	item: '.excerpt',
	pagination: '.pagination',
	next: '.next-page a',
	trigger: '查看更多',
	loader: '
',
	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