原文鏈接

圖片一直是網(wǎng)絡(luò)資源占用大戶，對于一個前端有幾百張圖片的網(wǎng)站來說，如果首屏即加載所有圖片（無論這些圖片有沒有被用戶看到），那無疑是既浪費網(wǎng)絡(luò)資源，又傷害用戶體驗的事。因此，圖片懶加載，是提高前端性能的剛需所在。目前，淘寶網(wǎng)、知乎等大流量網(wǎng)站都已經(jīng)使用了圖片滾動懶加載的方案——僅當圖片滾入視窗，被用戶看到的時候，才會去真正加載。

基本原理

圖片滾動懶加載的原理非常簡單：基于<img>標簽，在初次加載時，不把圖片url放在src屬性中，而是自定義一個屬性，例如data-src。然后檢測"scroll"，"resize"等窗體事件，判斷圖片是否進入了可視范圍。如果進入，則將data-src的字段替換到src，此時瀏覽器會自動去加載對應(yīng)圖片資源。

Talking is cheap, show you the code

首先是不添加src的img標簽，新增data-src用于放置圖片url：

img class="lazyImg" data-src="xxx" //即為一個正常的img標簽（簡書寫img標簽會出問題）

然后，我們需要新增一個數(shù)組隊列，來儲存所有未加載的img節(jié)點：

var lazyImg=[].slice.call(document.querySelectorAll(".lazyImg"));

為了方便，這里直接用querySelectorAll來獲取所有img節(jié)點。注意因為NodeList是只讀數(shù)組，因此需要將其轉(zhuǎn)化為數(shù)組，方便之后的增刪。在真實環(huán)境中，還需給每個成員添加其最近的可滾動祖先節(jié)點的引用，即el.parentNode。

最關(guān)鍵的部分來了，如何判斷圖片是否進入了可視區(qū)域，以及實現(xiàn)加載呢？

function loadImage(images){ 
  let scrollParent,src,el; 
  for(let i = 0;i < images.length;i++){ 
    scrollParent=images[i].scrollParent; //img所屬的最近的可滾動祖先節(jié)點
    el=images[i].el; //offset為預留的預加載距離 
    if(checkInView(el,scrollParent,this.options.offset)){ 
      src=el.dataset.src; 
      el.setAttribute("src",src);
      images.splice(i--,1); //將該img元素移除 
    } 
  }
}

上面提到的scrollParent是帶有scroll特性的祖先節(jié)點，具體實現(xiàn)：可使用getComputedStyle檢查父節(jié)點是否設(shè)置了overflow(overflow-x,overflow-y)為"auto"或"scroll"，不斷循環(huán)直到找到滿足條件的祖先節(jié)點。

下面封裝了判斷是否在可視區(qū)域的函數(shù)：

const checkInView=(el,scrollParent,offset)=>{
    let scrollTop,clientH,clientW,scrollLeft;
    let offsetTop=0,offsetLeft=0;
    if(scrollParent === window) {
        scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
        clientH=document.documentElement.clientHeight||document.body.clientHeight;
        clientW=document.documentElement.clientWidth||document.body.clientWidth;
    }
    else {
        scrollTop = scrollParent.scrollTop;
        scrollLeft=scrollParent.scrollLeft;
        clientH = scrollParent.clientHeight;
        clientW=scrollParent.clientWidth;
    }
    while(el!=scrollParent && el!=null){
        let borderWidth=parseInt(getStyle(el,"border-width"));
        offsetTop+=el.offsetTop+borderWidth;
        offsetLeft+=el.offsetLeft+borderWidth;
        el=el.offsetParent;
    }
    if(scrollTop+clientH>offsetTop-offset && scrollLeft+clientW>offsetLeft-offset){
        return true;
    }
    else return false;
}

最后再讓各自的scrollParent監(jiān)聽"scroll"，"resize"等事件即可：

function initListener(el){
    let scrollParent=getScrollParent(el);
    if(this.scrollParent.indexOf(scrollParent)<0){
        position = getStyle(scrollParent, "position");  //若為window則返回null
        if (position==="" || position === "static")   scrollParent.style.position = "relative";   //確保能檢測到正確的offsetTop和offsetLeft
            }        this.scrollParent.push(scrollParent);  //數(shù)組用于保存已經(jīng)監(jiān)聽的可滾動祖先節(jié)點
        this.eventsList.forEach((event)=>{
            scrollParent.addEventListener(event,this.loadImage.bind(this));
        })
    }
}

以上便是實現(xiàn)圖片懶加載的關(guān)鍵代碼。

如果有動態(tài)添加的img標簽，該怎么辦呢？其實很簡單，只需要將新增的img元素push進這個lazyImg數(shù)組隊列中，然后調(diào)用InitListener即可。

完整實現(xiàn)

利用以上原理，我實現(xiàn)了一個基于vue2.x的圖片懶加載的插件。完整源碼可參考vue-lazyload-images。