前端優化：圖片預加載

所謂預加載，就是提前加載了圖片。

有時候會加載一些在當前頁面沒有用到的圖片，是為了提前加載到緩存里，這樣后面的頁面就可以直接從緩存讀取了。

加載大圖的時候，我們可以先顯示模糊的縮略圖，等到大圖加載完了，再把縮略圖替換掉，這樣填補了圖片加載期間的空白時間。

image也有onload和onerror事件，分別是加載完后和加載失敗時執行。

Image對象是專門用於處理圖片加載的，就相當於內存中的img標簽。

圖片預加載案例：鼠標移入一張圖片時，換成另一張圖片，移出時換回原來的圖片。

正常做法是，鼠標移入的時候，改變圖片的src，但這時就要去加載圖片了，會等待一段時間，這樣體驗不好。

<img src="a.jpg" onmouseover="this.src='b.jpg';" onmouseout="this.src='a.jpg';"/>

預加載的做法是，在頁面加載完，鼠標移入之前就通過Image對象把圖片加載進緩存了，這樣鼠標移入的時候直接從緩存里讀取了，速度很快。

<img src="a.jpg" onmouseover="this.src='b.jpg';" onmouseout="this.src='a.jpg';"/>

window.onload=funciton(){
   var img=new Image();
   img.onload=function(){
        alert('預加載完了。')
    };       
    img.onerror=function(){
        alert('預加載失敗');
    }
    img.src='b.jpg' ;       
}

 

技術不是關鍵，重點還在於怎么提高頁面性能和用戶體驗。

預加載獲取圖片尺寸：

// 更新：
// 05.27: 1、保證回調執行順序：error > ready > load；2、回調函數this指向img本身
// 04-02: 1、增加圖片完全加載后的回調 2、提高性能
 
/**
 * 圖片頭數據加載就緒事件 - 更快獲取圖片尺寸
 * @version 2011.05.27
 * @author  TangBin
 * @see     http://www.planeart.cn/?p=1121
 * @param   {String}    圖片路徑
 * @param   {Function}  尺寸就緒
 * @param   {Function}  加載完畢 (可選)
 * @param   {Function}  加載錯誤 (可選)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
        alert('size ready: width=' + this.width + '; height=' + this.height);
    });
 */
var imgReady = (function () {
    var list = [], intervalId = null,
 
    // 用來執行隊列
    tick = function () {
        var i = 0;
        for (; i < list.length; i++) {
            list[i].end ? list.splice(i--, 1) : list[i]();
        };
        !list.length && stop();
    },
 
    // 停止所有定時器隊列
    stop = function () {
        clearInterval(intervalId);
        intervalId = null;
    };
 
    return function (url, ready, load, error) {
        var onready, width, height, newWidth, newHeight,
            img = new Image();
         
        img.src = url;
 
        // 如果圖片被緩存，則直接返回緩存數據
        if (img.complete) {
            ready.call(img);
            load && load.call(img);
            return;
        };
         
        width = img.width;
        height = img.height;
         
        // 加載錯誤后的事件
        img.onerror = function () {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };
         
        // 圖片尺寸就緒
        onready = function () {
            newWidth = img.width;
            newHeight = img.height;
            if (newWidth !== width || newHeight !== height ||
                // 如果圖片已經在其他地方加載可使用面積檢測
                newWidth * newHeight > 1024
            ) {
                ready.call(img);
                onready.end = true;
            };
        };
        onready();
         
        // 完全加載完畢的事件
        img.onload = function () {
            // onload在定時器時間差范圍內可能比onready快
            // 這里進行檢查並保證onready優先執行
            !onready.end && onready();
         
            load && load.call(img);
             
            // IE gif動畫會循環執行onload，置空onload即可
            img = img.onload = img.onerror = null;
        };
 
        // 加入隊列中定期執行
        if (!onready.end) {
            list.push(onready);
            // 無論何時只允許出現一個定時器，減少瀏覽器性能損耗
            if (intervalId === null) intervalId = setInterval(tick, 40);
        };
    };
})();