轉(zhuǎn)載地址
http://hjingren.cn/2017/06/09/js%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/
懶加載的意義
懶加載的主要目的是作為服務器前端的優(yōu)化晒杈，減少請求數(shù)或延遲請求數(shù)调窍，對服務器緩壓葬馋。
預加載:提前加載好研铆，緩存到本地丽声，當需要的時候直接讀取緩存，對服務器增壓
第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲
第二種是條件加載，符合某些條件譬胎，或觸發(fā)了某些事件才開始異步下載
第三種是可視區(qū)加載，即僅加載用戶可以看到的區(qū)域命锄，這個主要由監(jiān)控滾動條來實現(xiàn)堰乔，一般會在距用戶看到某圖片前一定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片
Web 圖片的懶加載就是通過讀取img元素脐恩，然后獲得img元素的data-src（也可以約定為其他屬性名）屬性的值镐侯，并賦予img的src，從而實現(xiàn)動態(tài)加載圖片的機制
我們首先需要給準備實施懶加載的img元素添加指定的class 這里為m-lazyload ,同時將img src賦值給 data-src屬性苟翻。
具體示例為：
1
動態(tài)加載總共分為以下幾個步驟:
1骗污、添加頁面滾動監(jiān)聽事件
window.addEventListener('scroll', _delay,false);
function_delay(){
???? clearTimeout(delay);
???? delay = setTimeout(function(){
???????????? _loadImage();
?????? }, time);
}
2崇猫、當觸發(fā)監(jiān)聽事件時會執(zhí)行 _loadImage 函數(shù)，該函數(shù)負責加載圖片
function_loadImage(){
?? for(vari = imgList.length; i--;) {
??????? varel = imgList[i];
??????? if(_isShow(el)) {
??????????? el.src = el.getAttribute('data-src');
??????????? el.className = el.className.replace(newRegExp("(\\s|^)"+ _selector.substring(1, _selector.length) +"(\\s|$)")," ");
???????????? imgList.splice(i,1);
???????? }
???? }
}
3身堡、判斷該圖片是否在當前窗口的可視區(qū)域內(nèi)
function_isShow(el){
??? varcoords = el.getBoundingClientRect();
???? return( (coords.top >=0&& coords.left >=0&& coords.top) <= (window.innerHeight? ||document.documentElement.clientHeight) +parseInt(offset));
}
到這一個簡單的圖片懶加載就寫成了
當網(wǎng)頁滾動的事件被觸發(fā) -> 執(zhí)行加載圖片操作 -> 判斷圖片是否在可視區(qū)域內(nèi) -> 在邓尤，則動態(tài)將data-src的值賦予該圖片拍鲤。
