如何實(shí)現(xiàn)一個(gè)圖片懶加載庫(kù)

silenceboy 發(fā)布于2019-08-20 18:55 / 3058人閱讀

摘要：幾個(gè)月前實(shí)現(xiàn)的一個(gè)圖片懶加載庫(kù)，地址。而這是我們可以優(yōu)化的地方，這里我們使用函數(shù)去抖，調(diào)整后的代碼如下至此，也算是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖片懶加載庫(kù)了，如有不足之處歡迎指正，大家一起交流交流

幾個(gè)月前實(shí)現(xiàn)的一個(gè)圖片懶加載庫(kù)lazyload.js，github 地址。

需要實(shí)現(xiàn)的效果

相信大家都在網(wǎng)頁(yè)中體驗(yàn)過(guò)圖片懶加載，它應(yīng)該有這樣的效果：當(dāng)圖片進(jìn)入我們的可視區(qū)時(shí)，加載這些圖片。其原因相信大家都懂的——提高用戶體驗(yàn)。

那么在代碼中，我們就應(yīng)該實(shí)現(xiàn)一下幾點(diǎn)功能：
1.當(dāng)頁(yè)面加載完成時(shí)，先對(duì)可視區(qū)的圖片進(jìn)行加載；
2.給 scroll 及 resize 事件添加監(jiān)聽(tīng)；
3.當(dāng)上述事件觸發(fā)時(shí)，對(duì)在可視區(qū)的圖片進(jìn)行加載，并將加載過(guò)的圖片移除。

具體實(shí)現(xiàn)

經(jīng)過(guò)上面的分析，我們一步一步來(lái)實(shí)現(xiàn)圖片懶加載。首先，我們先制定一些規(guī)則：
1.需要懶加載的圖片標(biāo)簽應(yīng)該帶有值為 lazyload-img 的類；
2.需要懶加載的圖片標(biāo)簽應(yīng)該帶有屬性 data-src ，其值為圖片的鏈接。

定義懶加載構(gòu)造函數(shù)

function LazyLoad() {
    // 將所有需要懶加載的圖片緩存在 imgList 數(shù)組中
    this.imgList = [].slice.call(document.querySelectorAll(".lazyload-img"));
    // 進(jìn)行初始化操作
    this.init();
}

接下來(lái)想想我們的 init 方法應(yīng)該做些什么？圖片的加載是通過(guò)事件觸發(fā)實(shí)現(xiàn)的，所以我在初始化的方法主要做的事情就是添加事件監(jiān)聽(tīng)。

把 init 方法的實(shí)現(xiàn)放到最后來(lái)講，接下來(lái)先來(lái)實(shí)現(xiàn)判斷圖片是否在可視區(qū)的方法 isInViewport。

isInViewport方法的實(shí)現(xiàn)

在上代碼前先來(lái)講講 getBoundingClientRect 這貨，不知道大家對(duì)她了解多少。MDN上給出的定義是這樣的：

Element.getBoundingClientRect()方法返回元素的大小及其相對(duì)于視口的位置。

什么意思呢，就是調(diào)用了這個(gè)方法后，返回了一個(gè)包含元素的寬高及其相對(duì)于瀏覽器視口左上角的位置信息。嗯.. 沒(méi)看懂:( 簡(jiǎn)單點(diǎn)說(shuō)呢，這個(gè)方法返回了一個(gè)對(duì)象，長(zhǎng)這樣：

{
    bottom: xx,
    left: xx,
    right: xx,
    top: xx,
    height: xx,
    width: xx
}

如果還是不太明白，可以直接到MDN看看。建議大家直接在控制臺(tái)試試，說(shuō)得再多不如動(dòng)手試一試。
那了解這個(gè)方法后，有啥用？當(dāng)然是用來(lái)判斷圖片是否在可視區(qū)咯，那我們來(lái)看看判斷的邏輯：

LazyLoad.prototype.isInViewport = function (img) {
    var clientH = document.documentElement.clientHeight, // 瀏覽器視口高度
        clientW = document.documentElement.clientWidth, // 瀏覽器視口寬度
        imgPosOb = img.getBoundingClientRect(), // 獲取img的位置信息
        imgT = imgPosOb.top,
        imgL = imgPosOb.left,
        imgH = imgPosOb.height,
        imgW = imgPosOb.width;

    // 判斷邏輯
    // 不清楚的同學(xué)可以在草稿紙上畫個(gè)圖
    if( (imgT > -imgH && imgT < clientH) && (imgL > -imgW && imgL < clientW) ) {
        // inViewport
        return true;
    } else {
        return false;
    }
}

我們還有什么功能沒(méi)實(shí)現(xiàn)？當(dāng)然還有最重要的加載！

實(shí)現(xiàn)圖片加載

這一步?jīng)]啥好說(shuō)的，直接上代碼：

// 參數(shù) imgList 是要加載的圖片列表
LazyLoad.prototype.loadImg = function (inVpImgList) {
    var len = inVpImgList.length;
    var src = "";

    for (var i = 0; i < len; i++) {
        src = inVpImgList[i].getAttribute("data-src");
        inVpImgList[i].src = src;
        inVpImgList[i].removeAttribute("data-src");
        this.removeItem(inVpImgList[i]);
    }
};

// 不要忘了這一步
// 把加載過(guò)的圖片移除
LazyLoad.prototype.removeItem = function (img) {
    var idx = this.imgList.indexOf(img);
    if(idx > -1) {
        this.imgList.splice(idx, 1);
    }
};

init方法的實(shí)現(xiàn)

最后，來(lái)完成我們的初始化方法：

LazyLoad.prototype.init = function () {
    var self = this;

    // callback函數(shù)即我們定義的事件觸發(fā)后的回調(diào)函數(shù)
    function callback() {
        var imgInVp = [];
        var len = self.imgList.length;

        for (var i = 0; i < len; i++) {
            if(self.isInViewport(self.imgList[i])) {
                imgInVp.push(self.imgList[i]);
            }
        }

        self.loadImg(imgInVp);
    }

    callback();

    document.addEventListener("scroll", callback, false);
    window.addEventListener("resize", callback, false);
};

可能有哪位細(xì)心的小伙伴會(huì)發(fā)現(xiàn)我在 init 方法中調(diào)用了一次 callback。讓我們?cè)倩仡^看看功能分析的第一點(diǎn)，你就明白了。那到這咱就完事了？不，還得優(yōu)化一下。

優(yōu)化

我們知道當(dāng)我們?cè)诙虝r(shí)間內(nèi)，連續(xù)地改變?yōu)g覽器窗口大小或者滾動(dòng)頁(yè)面，會(huì)連續(xù)多次地觸發(fā) resize 和 scroll 事件。而這是我們可以優(yōu)化的地方，這里我們使用函數(shù)去抖，調(diào)整后的代碼如下：

LazyLoad.prototype.init = function () {
    var self = this,
        timer = null;

    function callback() {
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            var imgInVp = [];
            var len = self.imgList.length;

            for (var i = 0; i < len; i++) {
                if(self.isInViewport(self.imgList[i])) {
                    imgInVp.push(self.imgList[i]);
                }
            }

            self.loadImg(imgInVp);
        }, 100);
    }

    callback();

    document.addEventListener("scroll", callback, false);
    window.addEventListener("resize", callback, false);
};

至此，也算是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖片懶加載庫(kù)了，如有不足之處歡迎指正，大家一起交流交流 :)