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

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

内容简介: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使用说明》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

美工神话

美工神话

聂小燕、赵秋轶 / 人民邮电出版社 / 2006 / 52.00元

本书是一本专门针对网页美工设计的图书,全面、细致地介绍利用 Dreamweaver 8 和 Photoshop CS2 进行创意和设计的具体方法和步骤。 全书共分为4篇12章,在阐述网页色彩设计和风格创意的基础上,以生动的实例引导读者全面地掌握 Photoshop 网页元素设计与 Dreamweaver 网页布局美化。书中涉及了诸多网页美化所必须掌握的知识点,比如色彩知识,风格创意,网页规划......一起来看看 《美工神话》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具