實現圖片懶載入(Lazyload)

Jakeeee發表於2016-11-27

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

懶載入的意義（為什麼要使用懶載入）

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

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

原理

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

注：圖片要指定寬高

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />複製程式碼

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

程式碼

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>

    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">

</body>複製程式碼

JavaScript

<script>
    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; //儲存圖片載入到的位置，避免每次都從第一張圖片開始遍歷

    lazyload(); //頁面載入完畢載入可是區域內的圖片

    window.onscroll = lazyload;

    function lazyload() { //監聽頁面滾動事件
        var seeHeight = document.documentElement.clientHeight; //可見區域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>複製程式碼

jQuery

<script>
    var n = 0,
        imgNum = $("img").length,
        img = $('img');

    lazyload();

    $(window).scroll(lazyload);

    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;
                }
            }
        }
    }
</script>複製程式碼

使用節流函式進行效能優化

如果直接將函式繫結在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));複製程式碼

相關文章