關於圖片懶加載

時間 2019-11-20

標籤關於圖片加載简体版

原文原文鏈接

對頁面加載速度影響最大的就是圖片，一張普通的圖片能夠達到幾M的大小，而代碼也許就只有幾十KB。當頁面圖片不少時，頁面的加載速度緩慢，幾S鍾內頁面沒有加載完成，也許會失去不少的用戶。因此，對於圖片過多的頁面，爲了加速頁面加載速度，因此不少時候咱們須要將頁面內未出如今可視區域內的圖片先不作加載，等到滾動到可視區域後再去加載。這樣子對於頁面加載性能上會有很大的提高，也提升了用戶體驗。html

將頁面中的img標籤src指向一張小圖片或者src爲空，而後定義data-src（這個屬性能夠自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認的圖片，不然當src爲空時也會向服務器發送一次請求。能夠指向loading的地址。（注：圖片要指定寬高）瀏覽器

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

<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>

　　下面是js寫法app

<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>

　　下面是JQ寫法函數

<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秒內執行一次。下面是一個簡單的節流函數：this

// 簡單的節流函數
//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) {}
// 採用了節流函數
window.addEventListener('scroll',throttle(lazyload,500,1000));

　　這樣就能完美的實現懶加載了，可是有時候圖片會加載失敗，這也是很麻煩的事情了。。spa

img標籤自帶onError屬性，當圖片加載失敗時，觸發error事件：code

$('img').error(function(){
    $(this).attr('src',"http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg");
});

//使用onerror或者jQuery的error事件時，若是默認圖片也發生加載失敗，則會造成死循環，最好的辦法是使用one綁定事件，只執行一次


$(「img」).one(「error」, function(e){
$(this).attr(「src」, 「http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg「);
});

轉載自：http://i.jakeyu.top/2016/11/26/%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/

做者：Jake

還能夠進入我的博客：www.jishubar.cn

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。