内容简介：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使用说明》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 日程日历系统，顶级插件FullCalendar使用说明
- ekphrasis使用说明
- axios的使用说明
- Go module 使用说明
- golang context使用说明
- Maven Archetype使用说明
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
现代前端技术解析
张成文 / 电子工业出版社 / 2017-4-1 / 79.00元
这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速，涉及的技术点很多，我们往往需要阅读很多书籍才能理解前端技术的知识体系。《现代前端技术解析》在前端知识体系上做了很好的总结和梳理，涵盖了现代前端技术绝大部分的知识内容，起到一个启蒙作用，能帮助读者快速把握前端技术的整个脉络，培养更完善的体系化思维，掌握更多灵活的前端代码架构方法，使读者获得成为高级前端工程师或架构师所必须具备的思维和能......一起来看看 《现代前端技术解析》 这本书的介绍吧!
