JavaScript原生實作圖檔懶加載

一、懶加載原理

一張圖檔就是一個

<img>

标簽，浏覽器是否發起請求圖檔是根據

<img>

的src屬性，是以實作懶加載的關鍵就是，在圖檔沒有進入可視區域時，先不給

<img>

的src指派，這樣浏覽器就不會發送請求了，等到圖檔進入可視區域再給src指派。

二、懶加載思路及實作

實作懶加載有四個步驟，如下：

1. 加載loading圖檔
2. 判斷哪些圖檔要加載【重點】
3. 隐形加載圖檔
4. 替換真圖檔

注意：判斷

clientHeight+scrollTop>offsetTop

這一步是關鍵~(與下拉加載更多的核心是一樣的)

代碼如下：

var imgs = document.querySelectorAll('img');

        //offsetTop是元素與offsetParent的距離，循環擷取直到頁面頂部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//擷取可視區域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (let i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                //這裡可以做一些異步請求 将請求的圖檔src指派給目前img标簽的src
                //建立一個臨時圖檔，這個圖檔在記憶體中不會到頁面上去。實作隐形加載
					var temp = new Image();
					temp.src = imgs[i].getAttribute('data-src');//隻會請求一次
					// onload判斷圖檔加載完畢，真是圖檔加載完畢，再指派給dom節點
					temp.onload = function(){
						// 擷取自定義屬性data-src，用真圖檔替換假圖檔
						imgs[i].src = imgs[i].getAttribute('data-src')
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滾動條滾動的時候觸發
            lazyLoad(imgs);
        }
           

參考：https://blog.csdn.net/w1418899532/article/details/90515969