快捷導(dǎo)航

Javascript實現(xiàn)圖片懶加載的示例代碼

更新時間：2024年12月02日 10:32:36 作者：zqwang888

最近公司和第三方材料供應(yīng)商對接開發(fā)了物資集采平臺,其中有個功能需求需要展示數(shù)百張材料信息圖片,有時頁面會出現(xiàn)卡頓的情況,并使用了圖片懶加載的方式進行了優(yōu)化,下面把方法分享給大家一起學(xué)習(xí),感興趣的小伙伴跟著小編一起來看看吧

未做優(yōu)化實例

以下代碼僅作為示例演示給大家看，不是公司內(nèi)部代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img  src="https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg">
    <img  src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png">
    <img   src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png">
    <img   src="https://img.36krcdn.com/20190905/v2_1567642423719_img_000">
    <img   src="https://img.36krcdn.com/20190905/v2_1567642425030_img_000">
    <img  src="https://img.36krcdn.com/20190905/v2_1567642425101_img_000">
    <img src="https://img.36krcdn.com/20190905/v2_1567642425061_img_000">
    <img  src="https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg">
    <img  src="https://img.36krcdn.com/20190905/v2_1567641974410_img_000">
    <img  src="https://img.36krcdn.com/20190905/v2_1567641974454_img_000">
</body>
</html>

一次性加載所有的圖片，這對瀏覽器的頁面加載是不友好的。

瀏覽器的工作機制

1.首先了解一下瀏覽器的運行機制

當(dāng)我們訪問一個網(wǎng)頁時

解析HTML文檔：瀏覽器從服務(wù)器獲取HTML文檔并開始解析，構(gòu)建DOM樹。
下載樣式表：瀏覽器下載CSS樣式表，并形成CSS樹。
渲染頁面：瀏覽器將DOM樹和CSS樹結(jié)合起來，生成渲染樹，并最終繪制出可見的頁面。
處理腳本：如果頁面中有JavaScript腳本，瀏覽器會執(zhí)行這些腳本。

2.雖然 JS 是單線程的，但是瀏覽器是多線程的；img 標(biāo)簽和 script 標(biāo)簽一樣都會讓瀏覽器啟動新的下載線程去下載圖片、JS 文件等；如果頁面上同時讓很多圖片一起加載，那會讓瀏覽器啟動很多并發(fā)任務(wù)，增加瀏覽器的壓力；這就猶如上高速，車流量如果太大，就容易造成堵塞。

懶加載

要實現(xiàn)懶加載，我們需要手動控制圖片的加載過程，而不是讓瀏覽器自動下載所有的<img>標(biāo)簽中的圖片。

1.使用數(shù)據(jù)屬性

將實際的圖片地址存儲在data-src屬性中

    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png">

2.監(jiān)聽滾動事件

        // 當(dāng)DOM內(nèi)容加載完成后執(zhí)行
        document.addEventListener('scroll', () => {
            // 調(diào)用loadImage函數(shù)
            loadImage();
        });

3.功能函數(shù)的實現(xiàn)

        // 定義 loadImage 函數(shù)
        function loadImage() {
            // 獲取文檔的可視區(qū)高度
            let screenHeight = document.documentElement.clientHeight;
 
            // 獲取滾動條的位置（兼容不同瀏覽器）
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
            // 遍歷所有圖片
            for(let i = 0; i < num; i++){
 
                // 檢查當(dāng)前圖片是否在可視區(qū)內(nèi)
                if(imgs[i].offsetTop<screenHeight + scrollTop){
 
                    // 獲取圖片的 src 屬性值（使用 data 屬性）
                    imgs[i].src = imgs[i].getAttribute('data-src');
 
                    // 更新當(dāng)前加載的圖片索引
                    n = i + 1;
 
                    // 檢查是否加載完所有需要懶加載的圖片
                    if (n === num){
                        // 停止監(jiān)聽滾動事件，進行性能優(yōu)化
                        window.removeEventListener('scroll', loadImage);
                    }
                }
            }
        }

clientHeight 用于獲取元素的可見高度（不包括邊框、內(nèi)邊距和外邊距）。此屬性通常用于獲取諸如窗口、文檔或元素的高度
scrollTop 用于獲取或設(shè)置一個元素相對于其滾動容器的垂直滾動距離。這個值是從元素頂部到視口頂部的距離
offsetTop 用于獲取元素相對于最近的帶有定位（positioned）祖先元素的頂部偏移量。如果沒有定位的祖先，則相對于文檔的頂部

優(yōu)化：懶加載進行防抖

由于滾動事件太敏感，容易高頻觸發(fā)懶加載函數(shù)loadImage，我們可以給它添加一個防抖的優(yōu)化操作，減少事件的觸發(fā)。

工具庫

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
    <img  data-price="20" data-src="https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567642423719_img_000">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567642425030_img_000">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567642425101_img_000">
    <img data-src="https://img.36krcdn.com/20190905/v2_1567642425061_img_000">
    <img  data-src="https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641974410_img_000">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641974454_img_000">
    
    <script>
        // 獲取頁面中所有的img元素
        const imgs = document.getElementsByTagName('img');
        // 獲取img元素的數(shù)量
        const num = imgs.length;
        // 記錄當(dāng)前加載的是第幾張圖片，從0開始
        let n = 0;
 
        // 當(dāng)DOM完全加載后，執(zhí)行l(wèi)oadImage函數(shù)
        document.addEventListener('DOMContentLoaded', () => {
            loadImage();
        });
 
        // 定義loadImage函數(shù)
        function loadImage() {
            console.log('121122');
            // 獲取可視區(qū)域的高度，兼容不同瀏覽器
            let screenHeight = document.documentElement.clientHeight;
            // 獲取滾動條的位置，兼容不同瀏覽器
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
            // 遍歷所有圖片
            for (let i = 0; i < num; i++){
                // 如果圖片的頂部位置在可視區(qū)內(nèi)
                if (imgs[i].offsetTop < screenHeight + scrollTop){
                    // 設(shè)置圖片的src屬性
                    imgs[i].src = imgs[i].getAttribute('data-src');
                    // 更新加載的圖片索引
                    n = i + 1;
                    // 如果所有圖片都已加載，則移除scroll事件的監(jiān)聽器，進行性能優(yōu)化
                    if (n === num){
                        // console.log('加載完成');
                        // 所有圖片加載完成后，移除功能函數(shù)
                        window.removeEventListener('scroll', throttleLazyLoad);
                    }
                }
            }
        }
 
        // 使用Lodash的throttle函數(shù)來延遲loadImage的執(zhí)行，減少性能開銷
        const throttleLazyLoad = _.throttle(loadImage, 300);
        // 添加scroll事件監(jiān)聽器，在滾動時執(zhí)行throttleLazyLoad
        window.addEventListener('scroll', throttleLazyLoad);
        
    </script>
</body>
</html>