再談javascript圖片預先載入技術(詳細示範)

而本文所提到的預先載入技術主要是讓javascript快速擷取圖標題部資料的尺寸。

一段典型的使用預先載入擷取圖片大小的例子： 複製代碼 代碼如下: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;
};
};
};

可以看到使用onload的方式必須等待圖片載入完畢，其速度不敢恭維。
web應用程式區別於傳統型應用程式，響應速度才是最好的使用者體驗。如果想要速度與優雅兼得，那就必須提前獲得圖片尺寸，如何在圖片沒有載入完畢就能擷取圖片尺寸？
十多年的上網經驗告訴我：瀏覽器在載入圖片的時候你會看到圖片會先佔用一塊地然後才慢慢載入完畢，並且這裡大部分的圖片都是沒有預設width與height屬性的，因為瀏覽器能夠擷取圖片的頭部資料。基於此，只需要使用javascript定時偵測圖片的尺寸狀態便可得知圖片尺寸就緒的狀態。
實現代碼（2011-03-11更新）：
2011-03-12 更新：
只使用一定時器，最佳化效能
複製代碼 代碼如下:/*!
* img ready v0.3
* http://www.planeart.cn/?p=1121
* TangBin - MIT Licensed
*/
// 圖標題資料載入就緒事件
// @param {String} 圖片路徑
// @param {Function} 擷取尺寸的回呼函數 (參數1接收width；參數2接收height)
// @param {Function} 載入錯誤的回呼函數 (可選)
(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;
};
this.imgReady = function (url, callback, error) {
var check, end, width, height, offsetWidth, offsetHeight, div,
accuracy = 1024,
doc = document,
container = doc.body || doc.getElementsByTagName('head')[0],
img = new Image();
img.src = url;
if (!callback) return img;
// 如果圖片被緩衝，則直接返回快取資料
if (img.complete) return callback(img.width, img.height);
// 向頁面插入隱秘映像，用來監聽圖片是否佔位
div = doc.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
container.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
// 完全載入完畢的事件
img.onload = function () {
end();
callback(img.width, img.height);
};
// 載入錯誤後的事件
img.onerror = function () {
end();
error && error();
};
// 檢測圖片是否已經佔位
check = function () {
offsetWidth = img.offsetWidth;
offsetHeight = img.offsetHeight;
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) {
end();
callback(offsetWidth, offsetHeight);
};
};
check.url = url;
// 操作結束後進行清理
// 刪除元素與事件，避免IE記憶體流失
end = function () {
check.end = true;
img.onload = img.onerror = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
// 將檢測圖片是否佔位的函數加入定時器列隊定期執行
// 同一圖片只加入一個檢測器
// 無論何時只允許出現一個定時器，減少瀏覽器效能損耗
!check.end && check();
for (var i = 0; i < list.length; i ++) {
if (list[i].url === url) return;
};
if (!check.end) {
list.push(check);
if (!intervalId) intervalId = setInterval(tick, 150);
};
};
})();

是不是很簡單？這樣的方式擷取攝影層級照片尺寸的速度往往是onload方式的幾十多倍，而對於web普通(800×600內)瀏覽層級的圖片能達到秒殺效果。
好了，請觀賞令人愉悅的 DEMO ： http://demo.jb51.net/js/2011/imgready/
（通過測試的瀏覽器：Chrome、Firefox、Safari、Opera、IE6、IE7、IE8）
來自:: 唐斌