javascript圖片預加載技術

 

圖片預加載技術的典型應用：

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

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

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應用程序區別于桌面應用程序，響應速度才是最好的用戶體驗。如果想要速度與優雅兼得，那就必須提前獲得圖片尺寸，如何在圖片沒有加載完畢就能獲取圖片尺寸？

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

flash雖然很強大，但它與生俱來的缺點讓人愛恨交織，加上很多移動設備不支持falsh無疑更是致命的傷，還是放棄吧。

二、在服務端保存圖片尺寸數據

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

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

十多年的上網經驗告訴我：瀏覽器在加載圖片的時候你會看到圖片會先占用一塊地然后才慢慢加載完畢，并且這里大部分的圖片都是沒有預設width與height屬性的，因為瀏覽器能夠獲取圖片的頭部數據?；诖耍恍枰褂胘avascript定時偵測圖片的尺寸狀態便可得知圖片尺寸就緒的狀態。

實現代碼：

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);
    };
    // 通過占位提前獲取圖片頭部數據
    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);
    };
 

 

---