1. 程式人生 > >滑鼠滾動到頁面底部自動載入資料--阻止多次請求

滑鼠滾動到頁面底部自動載入資料--阻止多次請求

//滑鼠滾動到頁面最底部載入資料
var documentHeight = [0];
$(window).bind("scroll",function() {
 
if($(document).scrollTop() + $(window).height() > $(document).height()-1){
    documentHeight.
push($(document).height())
   
if(documentHeight[documentHeight.length-1]>documentHeight[documentHeight.length-2]){
      documentHeight[documentHeight.

length-2] = documentHeight[documentHeight.length-2] + documentHeight[documentHeight.length-1];
     
$(".res-more").css("display","none");
     
self.getShareFiles();
   
}
  }
else{
   
$(".res-more").css("display","block");
 
}
})

為window新增一個scroll事件,瀏覽器每次觸發scroll事件時判斷是否滾動到了瀏覽器底部,如果到了底部則載入新資料。關鍵是計算滾動條是否滾動到了瀏覽器底部,演算法如下:

滾動條捲起來的高度 +視窗高度 > 文件的總高度 + 1

兩層判斷,外層判斷是否到達頁面底部,內層判斷控制只觸發一次請求;