<li id="g3zqm"></li>
2018-5-24 之晨
1.什么是懶加載？
當訪問一個頁面的時候，先把img元素背景圖片路徑替換成一張替代圖片的路徑（這樣就只需請求一次，占位圖），將圖片的真實路徑存儲在img自定義屬性中，只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
2.為什么要用懶加載？
很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載完畢，提高首屏加載速度，可以減輕服務器壓力，節約流量，用戶體驗好。
3.懶加載實現封裝？
lazyLoad由四個函數組成，init(初始化函數)，checkShow（判斷圖片是否加載），shouldShow（將要展示的圖片），showImg（展示圖片）。
（1）初始化函數(init) 由于滾動事件太消耗性能，所以用定時器替換,不是滾動就觸發,而是滾動后200毫秒后觸發。
var timer;
function init(){
$(window).on("scroll",function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
checkShow(); //
},200);
});
}
（2）判斷”圖片是否加載“（checkshow）函數，如果圖片有isload屬性，就說明圖片已經加載過了，直接return。如果圖片沒有isload屬性，進入將要展示圖片shouldshow函數
function checkShow(){
$lazyLoad.each(function(){
$cur = $(this);
if($cur.attr('isLoaded')){
return;
}
if(shouldShow($cur)){
showImg($cur);
}
});
}
（3）將要展示圖片shouldshow函數，獲取屏幕可視寬度，滾動高度，要展示的元素到文檔的高度，如果元素到文檔的高度小于屏幕的可視高度加上滾動高度，說明元素已在可視區內，返回true，否則返回false。
function shouldShow ($node){
var scrollH = $(window).scrollTop(),
windowH = $(window).height(),
top = $node.offset().top;
if(top < windowH + scrollH){
return true;
} else {
return false;
}
}
（4）“展示圖片”函數，將元素的src屬性替換為自定義屬性data-src(真正圖片的地址)。
function showImg ($node){
$node.find("img").attr("src",$node.data("src"));
$node.attr("isLoaded",true);
}
（5）函數返回一個對象
return {
init : init
}
這樣就實現懶加載封裝了！