預加載和懶加載

時間 2019-11-20

標籤加載简体版

原文原文鏈接

本文原連接：http://www.javashuo.com/article/p-maszgcpz-cr.htmljavascript

圖片懶加載與預加載

閱讀目錄

回到頂部

預加載

1.1什麼是預加載？
預加載就是提早加載圖片，當用戶須要查看時可直接從本地緩存中渲染。爲何要使用預加載？css

1.2當頁面中圖片比較大的時候，頁面加載的時候會出現該區域空白的效果或者看到圖片正在慢慢地加載出來，爲了提升用戶體驗，需
要把這些圖片提早加載到緩存中，當用戶一打開頁面的時候，這些圖片就會快速的呈現出來，得到更好的用戶體驗效果。

html

方法1,在CSS background中加載：會增長頁面的總體加載時間前端

#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }

方法2，JS new image對象，設置src加載：經常使用的是new Image();，設置其src來實現預載，再使用onload方法回調預載完成事件。java

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();
        img1.src = ";;
        img2.src = ";;
        img3.src = ";;
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {//onload中未掛載函數才執行該JS
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);
div.appendChild(img1);//插入到DOM

方法3，Ajax預加載,new Image()對象設置srcajax

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url;);
        xhr.send();
        xhr = new XMLHttpRequest();
        xhr.open('GET', url;);
        xhr.send();
        // preload image
        new Image().src = ";;
    }, 1000);
};

經常使用的是new Image();，設置其src來實現預載，再使用onload方法回調預載完成事件。

function loadImage(url, callback)
{
　　var img = new Image(); //建立一個Image對象，實現圖片的預下載
　　img.src = url;
　　if (img.complete)
　　{ // 若是圖片已經存在於瀏覽器緩存，直接調用回調函數
　　　　callback.call(img);
　　　　return; // 直接返回，不用再處理onload事件
　　}
　　img.onload = function ()
　　{ //圖片下載完畢時異步調用callback函數。
　　　　callback.call(img);//將回調函數的this替換爲Image對象 ，若是你直接用img.width的時候，圖片尚未徹底下載下來
　　};
}

測試用例：

function imgLoaded()
{
　　alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

當圖片加載過一次之後，若是再有對該圖片的請求時，因爲瀏覽器已經緩存住這張圖片了，不會再發起一次新的請求，而是直接從緩存中加載過來。對於 firefox和safari，它們視圖使這兩種加載方式對用戶透明，一樣會引發圖片的onload事件，而ie和opera則忽略了這種同一性，不會引發圖片的onload事件

使用img標籤或者經過標籤的background-image屬性均可以實現圖片的預加載。可是爲了不初次載入過多圖片影響體驗。通常最好在文檔渲染完成之後再加載（使用window.onload等）。

場景：

若是某一個效果須要更換背景圖片，那麼圖片會臨時去加載，這樣會出現圖片須要一段時間才能顯示出來，用戶體驗就會變差，因此圖片須要預加載。好比照片牆，滾動圖片什麼，須要無縫顯示圖片的，以前加載好圖片纔不至於要顯示下一張圖片的時候臨時去拉圖片致使顯示圖片過慢。

回到頂部

懶加載

2.1什麼是懶加載?
懶加載又稱延遲加載。當訪問一個頁面的時候，須要先把img元素或者其餘元素的背景圖先用一張默認的圖片代替（佔位圖），這樣子瀏覽器

瀏覽器渲染頁面的時候就只需請求一次。當圖片出如今瀏覽器可視區域的時候，才設置圖片的真實路徑，把圖片顯示出來。緩存

2.2爲何要使用圖片懶加載？
當頁面中圖片的數量多到必定數量的時候，而且圖片大小比較大，好比各類商場網站，圖片素材網等等。若是在頁面一加載的時候就
加載所有圖片，顯然會影響網站加載速度和加大服務器負擔，並且用戶體驗也必然很差，那麼這時候能夠採用懶加載。服務器

2.3 懶加載具體實現原理
頁面中的img元素之因此會發送http請求的緣由是設置了src屬性，不然瀏覽器就不會發送請求去下載這個圖片。首先在頁面中把全部app

的圖片用一張佔位圖進行佔位，而且在元素下設置data-src自定義屬性，存放圖片的真實路徑，當須要用到的時候取出該真實路徑動

態添加給src。

意義：懶加載的主要目的是做爲服務器前端的優化，緩解服務器前端壓力，一次性請求次數減小或延遲請求。

實現方式：

1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.

2.第二種是條件加載，符合某些條件，或觸發了某些事件纔開始異步下載。

3.第三種是可視區加載，即僅加載用戶能夠看到的區域，這個主要由監控滾動條來實現，通常會在距用戶看到某圖片前必定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。

圖片沒拉回來也會觸發onerror事件

懶加載：將圖片src賦值爲一張默認圖片，當用戶滾動滾動條到可視區域圖片時候，再去加載真正的圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload 2</title>
    <style>
    img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
    }
    </style>
</head>
<body>
    <img src="images/loading.gif" data-src="images/1.png">
    <img src="images/loading.gif" data-src="images/2.png">
    <img src="images/loading.gif" data-src="images/3.png">
    <img src="images/loading.gif" data-src="images/4.png">
    <img src="images/loading.gif" data-src="images/5.png">
    <img src="images/loading.gif" data-src="images/6.png">
    <img src="images/loading.gif" data-src="images/7.png">
    <img src="images/loading.gif" data-src="images/8.png">
    <img src="images/loading.gif" data-src="images/9.png">
    <img src="images/loading.gif" data-src="images/10.png">
    <img src="images/loading.gif" data-src="images/11.png">
    <img src="images/loading.gif" data-src="images/12.png">
    <script>

    function throttle(fn, delay, atleast) {//函數綁定在 scroll 事件上，當頁面滾動時，避免函數被高頻觸發，
        var timeout = null,//進行去抖處理
        startTime = new Date();
        return function() {
        var curTime = new Date();
        clearTimeout(timeout);
        if(curTime - startTime >= atleast) {
            fn();
            startTime = curTime;
        }else {
            timeout = setTimeout(fn, delay);
        }
        }
    }
    function lazyload() {
        var images = document.getElementsByTagName('img');
        var len    = images.length;
        var n      = 0;      //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷        
        return function() {
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i = n; i < len; i++) {
            if(images[i].offsetTop < seeHeight + scrollTop) {
                if(images[i].getAttribute('src') === 'images/loading.gif') {
                 images[i].src = images[i].getAttribute('data-src');
                }
            n = n + 1;
             }
        }
        }
    }
    var loadImages = lazyload();
    loadImages();          //初始化首頁的頁面圖片
    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
　　//函數節流（throttle）與函數去抖（debounce）處理,
//500ms 的延遲，和 1000ms 的間隔，當超過 1000ms 未觸發該函數，則當即執行該函數，否則則延遲 500ms 執行該函數
    </script>
</body>
</html>

回到頂部