實現圖片懶加載(lazyload)

Developer 發布于2019-08-22 10:44 / 3461人閱讀

摘要：當頁面圖片很多時，頁面的加載速度緩慢，幾鐘內頁面沒有加載完成，也許會失去很多的用戶。指向一張默認的圖片，否則當為空時也會向服務器發送一次請求。這樣便實現了懶加載。我想實現限制觸發頻率，來優化性能。

本文標題:實現圖片懶加載(lazyload)
文章作者:Jake
發布時間:2016-11-26, 18:46:34
最后更新:2016-11-28, 17:12:59
原始鏈接:http://i.jakeyu.top/2016/11/26/實現圖片懶加載/
許可協議: "署名-非商用-相同方式共享 4.0" 轉載請保留原文鏈接及作者。

懶加載的意義（為什么要使用懶加載）

對頁面加載速度影響最大的就是圖片，一張普通的圖片可以達到幾M的大小，而代碼也許就只有幾十KB。當頁面圖片很多時，頁面的加載速度緩慢，幾S鐘內頁面沒有加載完成，也許會失去很多的用戶。

所以，對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做加載，等到滾動到可視區域后再去加載。這樣子對于頁面加載性能上會有很大的提升，也提高了用戶體驗。

原理

將頁面中的img標簽src指向一張小圖片或者src為空，然后定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認的圖片，否則當src為空時也會向服務器發送一次請求。可以指向loading的地址。

注：圖片要指定寬高

當載入頁面時，先把可視區域內的img標簽的data-src屬性值負給src，然后監聽滾動事件，把用戶即將看到的圖片加載。這樣便實現了懶加載。

代碼

在寫代碼前，需要了解各種高度。先看這篇文章scrollTop,offsetTop,scrollLeft,offsetLeft


    
    Document

JavaScript

jQuery

使用節流函數進行性能優化

如果直接將函數綁定在scroll事件上，當頁面滾動時，函數會被高頻觸發，這非常影響瀏覽器的性能。

我想實現限制觸發頻率，來優化性能。

節流函數：只允許一個函數在N秒內執行一次。下面是一個簡單的節流函數：

// 簡單的節流函數
//fun 要執行的函數
//delay 延遲
//time  在time時間內必須執行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();

    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();

        clearTimeout(timeout);
        // 如果達到了規定的觸發時間間隔，觸發 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 沒達到觸發間隔，重新設定定時器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 實際想綁定在 scroll 事件上的 handler
function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") == "default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);

                    n = i + 1;
                }
            }
        }
    }
// 采用了節流函數
window.addEventListener("scroll",throttle(lazyload,500,1000));

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

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

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

摘要：幾個月前實現的一個圖片懶加載庫，地址。而這是我們可以優化的地方，這里我們使用函數去抖，調整后的代碼如下至此，也算是實現了一個簡單的圖片懶加載庫了，如有不足之處歡迎指正，大家一起交流交流幾個月前實現的一個圖片懶加載庫lazyload.js，github 地址。需要實現的效果相信大家都在網頁中體驗過圖片懶加載，它應該有這樣的效果：當圖片進入我們的可視區時，加載這些圖片。其原因相信大家...

silenceboy 2019-08-20 18:55 評論0 收藏0
實現圖片懶加載(lazyload)

摘要：當頁面圖片很多時，頁面的加載速度緩慢，幾鐘內頁面沒有加載完成，也許會失去很多的用戶。指向一張默認的圖片，否則當為空時也會向服務器發送一次請求。這樣便實現了懶加載。我想實現限制觸發頻率，來優化性能。本文標題:實現圖片懶加載(lazyload)文章作者:Jake發布時間:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始鏈接:http://i....

renweihub 2019-08-30 13:10 評論0 收藏0
實現圖片懶加載(lazyload)

摘要：當頁面圖片很多時，頁面的加載速度緩慢，幾鐘內頁面沒有加載完成，也許會失去很多的用戶。指向一張默認的圖片，否則當為空時也會向服務器發送一次請求。這樣便實現了懶加載。我想實現限制觸發頻率，來優化性能。本文標題:實現圖片懶加載(lazyload)文章作者:Jake發布時間:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始鏈接:http://i....

lushan 2019-08-01 16:00 評論0 收藏0
圖片懶加載的前世今生

摘要：配置項配置項中的參數有以下三個所監聽對象的具體祖先元素，默認是計算交叉狀態時，將附加到祖先元素上，從而有效的擴大或者縮小祖先元素判定區域設置一系列的閾值，當交叉狀態達到閾值時，會觸發回調函數。一、前言 ??通常情況下，HTML 中的圖片資源會自上而下依次加載，而部分圖片只有在用戶向下滾動頁面的場景下才能被看見，否則這部分圖片的流量就白白浪費了。 ??所以，對于那些含有大量圖片資源的網...

zhaot 2019-08-23 16:13 評論0 收藏0
vue 圖片懶加載 vue-lazyload

摘要：在項目中，如果出現大圖一時半會加載不出來的情況確實很丑。如果是那種沒有給定寬高靠圖片撐起來的等圖片加載出來再把內容擠下去的用戶體驗效果非常差。如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。在項目中，如果出現大圖一時半會加載不出來的情況確實很丑。如果是那種沒有給定寬高靠圖片撐起來的等圖片加載出來再把內容擠下去的用戶體驗效果非常差。在vue中使用vue-lazylo...

番茄西紅柿 2019-04-23 13:20 評論0 收藏0