页面滚动无限加载jQuery插件jquery.infinitescroll.js使用说明

栏目: jQuery · 发布时间: 6年前

内容简介：jquery.infinitescroll.js插件的作用是：随着浏览器窗口滚动，不刷新页面自动加载下一页内容，常用于文章列表页面。常见的手机浏览网站的文章列表，浏览到最后一篇时，自动加载更多的文章出来。插件官网和下载：在html文件的<head></head>之间引用插件文件：

jquery.infinitescroll.js插件的作用是：随着浏览器窗口滚动，不刷新页面自动加载下一页内容，常用于文章列表页面。常见的手机浏览网站的文章列表，浏览到最后一篇时，自动加载更多的文章出来。

插件官网和下载： https://infinite-scroll.com/

基本用法

在html文件的<head></head>之间引用插件文件：

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

HTML结构：

<div id="content">
	<div class="post">...</div>
	......
</div>
<div class="navigation">
	<a href="next1.html">正在加载...</a>
</div>

注意：正在加载的链接页面next1.html，后面加载的页面要直接换成一页的页面url，如next2.html、next3.html

插件代码：

$('#content').infinitescroll({     //#content是包含所有图或块的容器
    navSelector  : "div.navigation",   //导航的容器，成功后会被隐藏
    nextSelector : "div.navigation a:first",  // 包含下一页链接的容器
    itemSelector : "#content div.post"  // 你将要取来的内容块
});

常用参数

$('#content').infinitescroll({
  navSelector  : "div.navigation", //导航的选择器，会被隐藏
  nextSelector : "div.navigation a:first",//包含下一页链接的选择器
  itemSelector : "#content div.post",//你将要取回的选项(内容块)
  debug        : true, //启用调试信息
  loadingImg   : "/img/loading.gif", //加载的时候显示的图片
				 //默认采用："http://www.infinite-scroll.com/loading.gif"
  animate      : true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
  extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150
  bufferPx     : 40,//载入信息的显示时间，时间越大，载入信息显示时间越短
  errorCallback: function(){},//当出错的时候，比如404页面的时候执行的函数
  localMode    : true //是否允许载入具有相同函数的页面，默认为false
  },function(arrayOfNewElems){
  //程序执行完的回调函数
}); 
 
//取消绑定事件的函数写法：
$(window).unbind(‘.infscr’);
 
//通过事件触发加载数据的写法：
$(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中
 
//此插件还可以载入任何页面的容器中的内容，可以是id以及是class，并转化到html存储，要比jquery自带的的load强大。
$('').load('/page/2/ #content div.post',function(){  $(this).appendTo('#content'); });

示例

1、只要还有下一页，就会一直加载，直接加载完所有页面的文章为止

$('#content').infinitescroll({
  navSelector  : '#pagenav',
  nextSelector : '#pagenav a',
  itemSelector : ".picdiv", 
  debug        : false, 
  loadingImg   : "ajax-loader.gif",
  loadingText  : "Loading new posts...",
  animate      : false, 
  donetext     : "I think we've hit the end, Jim"  
},function(){});
 
<div id="content">
   <div class="picdiv">...</div>
   ......
</div> 
<span id="pagenav" style="display:none" > <a href="index.php?page=2&show=">Next</a></span>

2、加到第10页就不再继续加载

var sp = 1
$(".infinite_scroll").infinitescroll({
	navSelector: "#more",
	nextSelector: "#more a",
	itemSelector: ".item",
		
	loading:{
		img: "images/masonry_loading_1.gif",
		msgText: ' ',
		finishedMsg: '木有了',
		finished: function(){
			sp++;
			if(sp>=10){ //到第10页结束事件
				$("#more").remove();
				$("#infscr-loading").hide();
				$("#page").show();
				$(window).unbind('.infscr');
			          }
		          }	
		},errorCallback:function(){ 
			$("#page").show();
		}
	},function(newElements){
		var $newElems = $(newElements);
		$newElems.fadeIn();
		return;
});
<div class="infinite_scroll">
   <div class="item">...</div>
   ......
</div>
<div id="more"><a href="p2.html"></a></div>

原文地址：https://blog.csdn.net/axer0811/article/details/8965872/

以上所述就是小编给大家介绍的《页面滚动无限加载jQuery插件jquery.infinitescroll.js使用说明》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Java Servlet & JSP Cookbook

Bruce W. Perry / O'Reilly Media / 2003-12-1 / USD 49.99

With literally hundreds of examples and thousands of lines of code, the Java Servlet and JSP Cookbook yields tips and techniques that any Java web developer who uses JavaServer Pages or servlets will ......一起来看看《Java Servlet & JSP Cookbook》这本书的介绍吧!

码农工具

页面滚动无限加载jQuery插件jquery.infinitescroll.js使用说明

基本用法

常用参数

示例

Java Servlet & JSP Cookbook

在线进制转换器

MD5 加密

XML、JSON 在线转换