1.什么是懶加載
懶加載也就是延遲加載瞬雹，當(dāng)使用或者需要的時(shí)候才進(jìn)行的加載操作悄晃，這樣來(lái)避免無(wú)謂的開(kāi)銷(xiāo)训唱。說(shuō)白了就是拖延癥褥蚯，不想一次性把活做完，非要拖到最后一刻才去做况增。
2.如何實(shí)現(xiàn)lazyLoad
lazyload的關(guān)鍵點(diǎn)在如何在適當(dāng)?shù)臅r(shí)候加載用戶(hù)需要的瀏覽器可視區(qū)域的資源赞庶，因此我們需要知道幾點(diǎn)信息來(lái)確定目標(biāo)是否存在在可視區(qū)域內(nèi),其中包括：
（1）屏幕滾動(dòng)的高度 var scrollH = $(window).scrollTop();
（2）瀏覽器的高度 ?var winH = $(window).height();
（3）圖片距離瀏覽器最頂部的高度var imgH = $(目標(biāo)元素).offset().top
isSee:function($el){
//返回true則說(shuō)明元素在可視區(qū)域內(nèi)返回false則不在可視范圍內(nèi)
? ? var scrollH = $(window).scrollTop();
? ? ? ? ? winH = $(window).height();
? ? ? ? ? imgH = $el.offset().top
? ? return winH+scrollH>imgH;
},
之后就是當(dāng)目標(biāo)出現(xiàn)的時(shí)候執(zhí)行我們需要的加載處理程序
$(window).on('scroll',function(){
_this.checkImg();
});
checkImg:function(){
var _this = this;
_this.$container.each(function(){
var $cur = $(this);
if (_this.isSee($cur)) {
$el.attr('src',$el.attr('data-src'));
};
})
},
這樣一個(gè)簡(jiǎn)單的懶加載就實(shí)現(xiàn)了
3.實(shí)現(xiàn)懶加載的去重以及去除多次滾動(dòng)重復(fù)加載的問(wèn)題
防止用戶(hù)不停滾動(dòng)不停的調(diào)用加載程序就是實(shí)現(xiàn)當(dāng)用戶(hù)不再滾動(dòng)之后再進(jìn)行加載，這樣我們就需要對(duì)瀏覽器的滾動(dòng)做一個(gè)監(jiān)聽(tīng)
$(window).on('scroll',function(){
// //當(dāng)不再滾動(dòng)的時(shí)候再執(zhí)行加載程序
timer && clearTimeout(timer);
timer = setTimeout(function(){
_this.checkImg();
},100);
});
當(dāng)然這也只是簡(jiǎn)單的實(shí)現(xiàn)的用戶(hù)停止?jié)L動(dòng)再加載程序澳骤，當(dāng)再次滾動(dòng)到已經(jīng)加載過(guò)的可視區(qū)域時(shí)還是會(huì)重復(fù)加載歧强，這時(shí)我們就需要對(duì)已經(jīng)加載過(guò)的元素進(jìn)行標(biāo)記來(lái)確定已經(jīng)加載過(guò)就不再重復(fù)加載
//添加data-load屬性來(lái)確定圖片是否被加載過(guò) 加載則不會(huì)重新加載
if (_this.isSee($cur) && !_this.isLoaded($cur)) {
_this.showImg($cur);
$cur.attr('data-load','true');
};
//判斷圖片是否已經(jīng)加載
isLoaded:function($el){
? ?if ($el.attr('data-load')) {
? ? return true;
? ?}else{
? ? return false;
}
以上就是簡(jiǎn)單的懶加載的過(guò)程了 ?當(dāng)然還有更多需要注意和改進(jìn)的地方 ?歡迎來(lái)戰(zhàn)！Ｎ埂摊册！
