如何實現一個圖片懶加載庫

silenceboy 發布于2019-08-20 18:55 / 3063人閱讀

摘要：幾個月前實現的一個圖片懶加載庫，地址。而這是我們可以優化的地方，這里我們使用函數去抖，調整后的代碼如下至此，也算是實現了一個簡單的圖片懶加載庫了，如有不足之處歡迎指正，大家一起交流交流

幾個月前實現的一個圖片懶加載庫lazyload.js，github 地址。

需要實現的效果

相信大家都在網頁中體驗過圖片懶加載，它應該有這樣的效果：當圖片進入我們的可視區時，加載這些圖片。其原因相信大家都懂的——提高用戶體驗。

那么在代碼中，我們就應該實現一下幾點功能：
1.當頁面加載完成時，先對可視區的圖片進行加載；
2.給 scroll 及 resize 事件添加監聽；
3.當上述事件觸發時，對在可視區的圖片進行加載，并將加載過的圖片移除。

具體實現

經過上面的分析，我們一步一步來實現圖片懶加載。首先，我們先制定一些規則：
1.需要懶加載的圖片標簽應該帶有值為 lazyload-img 的類；
2.需要懶加載的圖片標簽應該帶有屬性 data-src ，其值為圖片的鏈接。

定義懶加載構造函數

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

接下來想想我們的 init 方法應該做些什么？圖片的加載是通過事件觸發實現的，所以我在初始化的方法主要做的事情就是添加事件監聽。

把 init 方法的實現放到最后來講，接下來先來實現判斷圖片是否在可視區的方法 isInViewport。

isInViewport方法的實現

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

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

什么意思呢，就是調用了這個方法后，返回了一個包含元素的寬高及其相對于瀏覽器視口左上角的位置信息。嗯.. 沒看懂:( 簡單點說呢，這個方法返回了一個對象，長這樣：

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

如果還是不太明白，可以直接到MDN看看。建議大家直接在控制臺試試，說得再多不如動手試一試。
那了解這個方法后，有啥用？當然是用來判斷圖片是否在可視區咯，那我們來看看判斷的邏輯：

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;

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

我們還有什么功能沒實現？當然還有最重要的加載！

實現圖片加載

這一步沒啥好說的，直接上代碼：

// 參數 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]);
    }
};

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

init方法的實現

最后，來完成我們的初始化方法：

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

    // callback函數即我們定義的事件觸發后的回調函數
    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);
};

可能有哪位細心的小伙伴會發現我在 init 方法中調用了一次 callback。讓我們再回頭看看功能分析的第一點，你就明白了。那到這咱就完事了？不，還得優化一下。

優化

我們知道當我們在短時間內，連續地改變瀏覽器窗口大小或者滾動頁面，會連續多次地觸發 resize 和 scroll 事件。而這是我們可以優化的地方，這里我們使用函數去抖，調整后的代碼如下：

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);
};

至此，也算是實現了一個簡單的圖片懶加載庫了，如有不足之處歡迎指正，大家一起交流交流 :)

GPU云服務器云服務器 js實現數據的懶加載圖片 js圖片懶加載 js實現圖片預加載懶加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84879.html

淘寶新勢力周H5性能優化實戰

摘要：前言淘寶新勢力周春上新是命運石鏈路鏈路第一次承接級大促，面對級大促內容豐富且復雜的頁面需求，鏈路遇到了一些性能問題，在未進行性能優化之前，搭建出來的頁面，業務方普遍反饋頁面卡頓嚴重，無法滑動。前言淘寶新勢力周（春上新）是命運石kimi鏈路（H5鏈路）第一次承接S級大促，面對S級大促內容豐富且復雜的頁面需求，kimi鏈路遇到了一些性能問題，在未進行性能優化之前，搭建出來的頁面，業務方...

Lionad-Morotar 2019-08-22 16:17 評論0 收藏0
性能更優越的小程序圖片懶加載方式

摘要：相交比例相交區域占參照區域的比例。閾值相交比例如果達到閾值，則會觸發監聽器的回調函數。意義懶加載或者可以說是延遲加載，針對非首屏或者用戶看不到的地方延遲加載，有利于頁面首屏加載速度快、節約了流量,用戶體驗好實現方式傳統H5的懶加載方式都是通過監聽頁面的scroll事件來實現的，結合viewport的高度來判斷。小程序也類似，通過監聽頁面onPageScroll事件獲取當前滾動的...

AJie 2019-08-22 18:45 評論0 收藏0
談談Web應用中的圖片優化技巧及反思

摘要：要注意老舊的瀏覽器不支持的特性，它會繼續正常加載屬性引用的圖像。五安全地使用圖片的優勢這里不再贅述，簡單來說這篇文章，我們將一起探討，web應用中能對圖片進行什么樣的優化，以及反思一些負優化手段一、為什么要對圖片進行優化對于大多數前端工程師來說，圖片就是UI設計師(或者自己)切好的圖，你要做的只是把圖片丟進項目中，然后用以鏈接的方式呈現在頁面上，而且我們也經常把精力放在項目的打包...

zone 2019-08-26 10:43 評論0 收藏0
手摸手-100行代碼自己動手寫個功能完整的圖片懶加載插件

摘要：景科同學的想法很簡單，因為本人目前還是一個前端小白，只有通過不斷的寫，不斷的學，在與的相愛相殺中才能更快速的進步。本項目是景科同學自寫自測，雖然比較簡單，但是不保證沒有隱藏的。所以如果看官同學發現還望留言指正，景科同學在此以示感謝。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...

CompileYouth 2019-08-22 16:07 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

Vixb 2019-08-30 14:06 評論0 收藏0