什么是懶加載

懶加載是一種 網頁優化技術

作用

圖片作為一種網頁資源，請求時同樣將占用網絡資源，導致網頁首屏的加載時間被拉長。

如果一次性將網頁的所有圖片資源加載，會同時間出現大量的圖片請求。而懶加載，則是將圖片的加載，從原先的一口氣加載變成按需加載的模式，減少同時間發起的資源請求，加快頁面打開的速度，優化用戶體驗。

原理

通過JavaScript腳本，使圖片僅在當前可視區域的視窗內出現時才加載該圖片。達到減少首屏首次請求圖片資源的次數的技術就稱為圖片懶加載

https://lanhai1.github.io/archives/ 個人博客

思路

• 首先獲取圖片元素 保存在一個數組中 方便后面渲染至頁面

• 封裝函數 => 判斷該圖片是否可以進行加載

• 封裝函數 => 獲取圖片與窗口的信息
• 相比較 window的可視高度 是否 大于等于 圖片相對于視窗的top值
• 返回比較值

• 封裝函數 => 加載圖片 參數1:元素 參數2:數組索引值
• 獲取自定義屬性(元素存放src的屬性)
• 元素賦值正確的src
• 從數組中刪除已經渲染了的圖片

• 封裝函數 => 滾動事件
• 為瀏覽器注冊滾動時間 監測是否繼續懶加載

• 封裝函數 => 初始化
• 調用 是否加載圖片函數
• 調用 滾動事件函數

typescript代碼

// 圖片懶加載類
class LazyLoads {
    imglist: Array<Element>;
    // 構造器
    constructor(public el: string) {
        // 獲取圖片元素 追加至數組
        this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懶加載的圖片集合
    }
    // 判斷該圖片是否可以加載
    canILoad = () => {
        // 循環遍歷數組
        for (let i = this.imglist.length; i--;) {
            this.getBound(this.imglist[i]) && this.loadImage(this.imglist[i], i);
        }
    }
    // 獲取圖片與窗口的信息
    getBound = (el: Element): boolean => {
        // 獲取元素相對于視窗的位置
        let bound = el.getBoundingClientRect();
        // 獲取window可視高度
        let clientHeight = window.innerHeight;
        // 判斷是否需要加載數據
        return (bound.top <= clientHeight);
    }
    // 加載圖片
    loadImage = (el, index: number) => {
        // 獲取自定義屬性
        let src = el.getAttribute('data-lanhai');
        // 賦值
        el.src = src;
        // 刪除已經渲染了的圖片
        this.imglist.splice(index, 1);
    }
    getScroll = () => {
        // 為瀏覽器注冊滾動時間 監測是否繼續懶加載
        window.addEventListener('scroll', () => {
            this.imglist.length && this.canILoad();
        });
    }
    // 初始化
    init = () => {
        this.canILoad();
        this.getScroll();
    }
}
// 實例化對象，參數則是需要使用懶加載的圖片
let start = new LazyLoads('img')
// 初始化
start.init()

編譯后 JavaScript代碼

// 圖片懶加載類
var LazyLoads = /** @class */ (function () {
    // 構造器
    function LazyLoads(el) {
        var _this = this;
        this.el = el;
        // 判斷是否該圖片是否可以加載
        this.canILoad = function () {
            // 循環遍歷數組
            for (var i = _this.imglist.length; i--;) {
                _this.getBound(_this.imglist[i]) && _this.loadImage(_this.imglist[i], i);
            }
        };
        // 獲取圖片與窗口的信息
        this.getBound = function (el) {
            // 獲取元素相對于視窗的位置
            var bound = el.getBoundingClientRect();
            // 獲取window可視高度
            var clientHeight = window.innerHeight;
            // 判斷是否需要加載數據
            return (bound.top <= clientHeight);
        };
        // 加載圖片
        this.loadImage = function (el, index) {
            // 獲取自定義屬性
            var src = el.getAttribute('data-lanhai');
            // 賦值
            el.src = src;
            // 刪除已經渲染了的圖片
            _this.imglist.splice(index, 1);
        };
        this.getScroll = function () {
            // 為瀏覽器注冊滾動時間 監測是否繼續懶加載
            window.addEventListener('scroll', function () {
                _this.imglist.length && _this.canILoad();
            });
        };
        // 初始化
        this.init = function () {
            _this.canILoad();
            _this.getScroll();
        };
        // 獲取圖片元素 追加至數組
        this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懶加載的圖片集合
    }
    return LazyLoads;
}());
// 實例化對象，參數則是需要使用懶加載的圖片
var start = new LazyLoads('img');
// 初始化
start.init();