頁面滾動無限載入jQuery外掛jquery.infinitescroll.js使用說明
摘要：
jquery.infinitescroll.js外掛的作用是：隨著瀏覽器視窗滾動，不重新整理頁面自動載入下一頁內容，常用於文章列表頁面。常見的手機瀏覽網站的文章列表，瀏覽到最後一篇時，自動載入更多的文章出來。
外掛官網和下載：https://infinite-scroll.com...
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/