1、用於商城的樓層內容異步加載，滾動條滾動時才加載數據
2、如果當前屏幕上顯示了好幾個樓層，那么同時執行這幾個樓層的異步加載
3、如果滾動條在頁面中間，此時刷新頁面，刷新成功后，執行當前顯示在屏幕上的幾個樓層的異步加載，未顯示的不加載
4、如果滾動條在頁面下面，此時刷新頁面，刷新成功后，執行當前顯示在屏幕上的幾個樓層的異步加載，滾動條向上滾動時才加載上面的樓層
直接上代碼：
/**************************start* 懶加載方法(當元素進入在界面中顯示觸發回調函數)*************************************/ /** * 按數組格式傳入 * @param LazyLoadData 要傳入的數據 doc:元素節點；state:是否需要懶加載 false需要懶加載 callback: 回調函數 *傳入格式: * [{"doc":".header","state": false,"callback": function(){alert(1)}}, {"doc":".yb_louceng_1","state": false,"callback":function(){alert(2)}}] * @return */ function arrayLazyLoad(LazyLoadData){ var yb_getScrollTop = getScrollTop(), //滾動條在Y軸上的滾動距離 yb_getWindowHeight = getWindowHeight(), //瀏覽器窗口高度 yb_chufa_zuixiao_y = yb_getScrollTop, //觸發的最小y值 yb_chufa_zuida_y = yb_getScrollTop+yb_getWindowHeight; //觸發的最大y值 //循環判斷 for(var i=0;i<LazyLoadData.length;i++){ var yb_doc_start = $(LazyLoadData[i]["doc"]).offset().top, yb_doc_end = yb_doc_start + $(LazyLoadData[i]["doc"]).height(); var yb_panduan_a = yb_chufa_zuixiao_y>=yb_doc_start && yb_chufa_zuixiao_y<=yb_doc_end, yb_panduan_b = yb_chufa_zuida_y>=yb_doc_start && yb_chufa_zuida_y<=yb_doc_end, yb_panduan_c = yb_chufa_zuixiao_y<=yb_doc_start && yb_chufa_zuida_y>=yb_doc_end; if((yb_panduan_a || yb_panduan_b || yb_panduan_c) && LazyLoadData[i]["state"]==false){ LazyLoadData[i]["state"] = true; console.log("正在加載第"+i+"個樓層"); if(typeof callback === "function"){ LazyLoadData[i]["callback"](); } } } } /** * 單個元素傳入; * @param objId 元素ID * @param callback 回調函數 * @return */ function lazyLoad(objId,callback){ //檢測callback參數是否為函數 if(typeof callback === "function"){ //生成滾輪監聽觸發事件 var onScroll = function(){ var $obj = $("#"+objId); var objTop = $obj.offset().top; var objBot = objTop + $obj.height(); var scrollTop = getScrollTop(); var scrollBot = scrollTop + getWindowHeight(); //判斷元素是否在用戶視野內,如果是則觸發回調函數,移除監聽防止回調函數重復觸發 if(objTop <= scrollBot && objBot >= scrollTop){ $(window).off("scroll", onScroll); callback(); } } //開啟滾輪監聽 $(window).on("scroll", onScroll); $(window).scroll(); } } /**************************end** 懶加載方法(當元素進入在界面中顯示觸發回調函數)*************************************/ //滾動條在Y軸上的滾動距離 function getScrollTop(){ var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if(document.body){ bodyScrollTop = document.body.scrollTop; } if(document.documentElement){ documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; } //瀏覽器視口的高度 function getWindowHeight(){ var windowHeight = 0; if(document.compatMode == "CSS1Compat"){ windowHeight = document.documentElement.clientHeight; }else{ windowHeight = document.body.clientHeight; } return windowHeight; }
可以封裝到一個js文件，當作工具類庫使用。
測試：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" src=/scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/scripts/common.js"></script> <style> *{margin:0px;padding:0px;} .header{ height: 300px; background-color: #0C3; } .yb_louceng_1{ background-color: #03F; height: 320px; } .yb_louceng_2{ background-color: #F33; height: 250px; } .yb_louceng_3{ background-color: #03F; height: 340px; color: #093; } .yb_louceng_4{ background-color: #F0F; } </style> <script type="text/javascript"> $(function(){ var LazyLoadData =[{"doc":".header","state": false,"callback": function(){console.log(1)}}, {"doc":".yb_louceng_1","state": false,"callback":function(){console.log(2)}}, {"doc":".yb_louceng_2","state": false,"callback" : function(){console.log(3)}}, {"doc":".yb_louceng_3","state": false,"callback" : function(){console.log(4)}}, {"doc":".yb_louceng_4","state": false,"callback" : function(){console.log(5)}}]; arrayLazyLoad(LazyLoadData);
$(window).scroll(function(){
arrayLazyLoad(LazyLoadData);
});
}); </script> </head> <body class="bodycolor" topmargin="5"> <div class="header" id="header">頭部內容</div> <div class="yb_louceng_1" id="yb_louceng_1">樓層1內容</div> <div class="yb_louceng_2" id="yb_louceng_2">樓層2內容</div> <div class="yb_louceng_3" id="yb_louceng_3">樓層3內容</div> <div class="yb_louceng_4" id="yb_louceng_4"> 樓層4內容<br/> sd </div> </body> </html>