JS 圖片滾動懶載入

標籤：turn   tco   滾動   str   var   scroll   nts   檢測   需要   

基本原理

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

首先是不添加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。

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

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,clientH,clientW,scrollLeft;    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;    }    //在這裡判斷是否滾入可視地區。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即可。

 

JS 圖片滾動懶載入