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

Developer 發(fā)布于2019-08-22 10:44 / 3472人閱讀

摘要：當(dāng)頁面圖片很多時，頁面的加載速度緩慢，幾鐘內(nèi)頁面沒有加載完成，也許會失去很多的用戶。指向一張默認(rèn)的圖片，否則當(dāng)為空時也會向服務(wù)器發(fā)送一次請求。這樣便實(shí)現(xiàn)了懶加載。我想實(shí)現(xiàn)限制觸發(fā)頻率，來優(yōu)化性能。

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

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

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

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

原理

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

注：圖片要指定寬高

當(dāng)載入頁面時，先把可視區(qū)域內(nèi)的img標(biāo)簽的data-src屬性值負(fù)給src，然后監(jiān)聽滾動事件，把用戶即將看到的圖片加載。這樣便實(shí)現(xiàn)了懶加載。

代碼

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


    
    Document

JavaScript

jQuery

使用節(jié)流函數(shù)進(jìn)行性能優(yōu)化

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

我想實(shí)現(xiàn)限制觸發(fā)頻率，來優(yōu)化性能。

節(jié)流函數(shù)：只允許一個函數(shù)在N秒內(nèi)執(zhí)行一次。下面是一個簡單的節(jié)流函數(shù)：

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

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

        clearTimeout(timeout);
        // 如果達(dá)到了規(guī)定的觸發(fā)時間間隔，觸發(fā) handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 沒達(dá)到觸發(fā)間隔，重新設(shè)定定時器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 實(shí)際想綁定在 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;
                }
            }
        }
    }
// 采用了節(jié)流函數(shù)
window.addEventListener("scroll",throttle(lazyload,500,1000));