一塊兒來實現圖片滾動懶加載

圖片一直是網絡資源佔用大戶，對於一個前端有幾百張圖片的網站來講，若是首屏即加載全部圖片（不管這些圖片有沒有被用戶看到），那無疑是既浪費網絡資源，又傷害用戶體驗的事。所以，圖片懶加載，是提升前端性能的剛需所在。

目前，淘寶網、知乎等大流量網站都已經使用了圖片滾動懶加載的方案——僅當圖片滾入視窗，被用戶看到的時候，纔會去真正加載。

基本原理

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

Talking is cheap, show you the code

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

<img class="lazyImg" data-src="http://xxx.xxx.com"/>複製代碼

而後，咱們須要新增一個數組隊列，來儲存全部未加載的img節點：

var lazyImg=[].slice.call(document.querySelectorAll(".lazyImg"));複製代碼

爲了方便，這裏直接用querySelectorAll來獲取全部img節點。注意由於NodeList是隻讀數組，所以須要將其轉化爲數組，方便以後的增刪。在真實環境中，還需給每一個成員添加其最近的可滾動祖先節點的引用，即el.parentNode。

最關鍵的部分來了，如何判斷圖片是否進入了可視區域，以及實現加載呢？

// 參數傳入lazyImg數組
function loadImage(images){
    let scrollParent,src,el;
    for(let i = 0;i < images.length;i++){
        scrollParent=images[i].scrollParent;  //img所屬的最近的可滾動祖先節點
        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特性的祖先節點，具體實現：可以使用getComputedStyle檢查父節點是否設置了overflow(overflow-x,overflow-y)爲"auto"或"scroll"，不斷循環直到找到知足條件的祖先節點。

下面封裝了判斷是否在可視區域的函數：

const checkInView=(el,scrollParent,offset)=>{
    let scrollTop,scrollLeft,clientH,clientW;
    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;
    }
    //在這裏判斷是否滾入可視區域。offset爲預留的預加載距離
    if(scrollTop+clientH>el.offsetTop-offset && scrollLeft+clientW>el.offsetLeft-offset){
        return true;
    }
    else return false;
}複製代碼

最後再讓各自的scrollParent監聽"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);  //數組用於保存已經監聽的可滾動祖先節點
        this.eventsList.forEach((event)=>{
            scrollParent.addEventListener(event,this.loadImage.bind(this));
        })
    }
}複製代碼

以上即是實現圖片懶加載的關鍵代碼。

若是有動態添加的img標籤，該怎麼辦呢？其實很簡單，只須要將新增的img元素push進這個lazyImg數組隊列中，而後調用InitListener便可。

完整實現

利用以上原理，我實現了一個基於vue2.x的圖片懶加載的插件，完整代碼可參考這裏vue-lazyload-images。