圖片預加載技術(shù)的典型應用：

如lightbox方式展現照片，無(wú)疑需要提前獲得大圖的尺寸，這樣才能居中定位，由于javascript無(wú)法獲取img文件頭數據，必須等待其加載完畢后才能獲取真實(shí)的大小然后展示出來(lái)，所以lightbox顯示的圖片的速度體驗要比直接輸出的差很多，而本文說(shuō)提到的預加載技術(shù)主要針對獲取圖片尺寸。

一段典型的使用預加載獲取圖片大小的例子：

var imgLoad = function (url, callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
};

web應用程序區別于桌面應用程序，響應速度才是最好的用戶(hù)體驗。如果想要速度與優(yōu)雅兼得，那就必須提前獲得圖片尺寸，如何在圖片沒(méi)有加載完畢就能獲取圖片尺寸？

一、結合flash加載圖片，獲取圖片頭部數據的尺寸

flash雖然很強大，但它與生俱來(lái)的缺點(diǎn)讓人愛(ài)恨交織，加上很多移動(dòng)設備不支持falsh無(wú)疑更是致命的傷，還是放棄吧。

二、在服務(wù)端保存圖片尺寸數據

這里不得不提到騰訊Qzone的lightbox相冊，它就是這樣做的。它能在圖片沒(méi)有加載完全的時(shí)候就居中放大圖片，速度與優(yōu)雅基本兼得。不過(guò)它仍然難以避免blog插入的外鏈圖片的問(wèn)題，也只能按傳統的方式加載完畢才能展示。

三、javascript通過(guò)占位方式獲取圖片頭部數據的尺寸

十多年的上網(wǎng)經(jīng)驗告訴我：瀏覽器在加載圖片的時(shí)候你會(huì )看到圖片會(huì )先占用一塊地然后才慢慢加載完畢，并且這里大部分的圖片都是沒(méi)有預設width與height屬性的，因為瀏覽器能夠獲取圖片的頭部數據?；诖?，只需要使用javascript定時(shí)偵測圖片的尺寸狀態(tài)便可得知圖片尺寸就緒的狀態(tài)。

實(shí)現代碼：

var imgReady = function (url, callback, error) {
    var width, height, intervalId, check, div,
        img = new Image(),
        body = document.body;
    img.src = url;
    // 從緩存中讀取
    if (img.complete) {
        return callback(img.width, img.height);
    };
    // 通過(guò)占位提前獲取圖片頭部數據
    if (body) {
        div = document.createElement('div');
        div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;
height:1px;overflow:hidden';
        div.appendChild(img)
        body.appendChild(div);
        width = img.offsetWidth;
        height = img.offsetHeight;
        check = function () {
            if (img.offsetWidth !== width || img.offsetHeight !== height) {
                clearInterval(intervalId);
                callback(img.offsetWidth, img.clientHeight);
                img.onload = null;
                div.innerHTML = '';
                div.parentNode.removeChild(div);
            };
        };
        intervalId = setInterval(check, 150);
    };
    // 加載完畢后方式獲取
    img.onload = function () {
        callback(img.width, img.height);
        img.onload = img.onerror = null;
        clearInterval(intervalId);
        body && img.parentNode.removeChild(img);
    };
    // 圖片加載錯誤
    img.onerror = function () {
        error && error();
        clearInterval(intervalId);
        body && img.parentNode.removeChild(img);
    };
 

 

---