快捷導(dǎo)航

再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)

更新時間：2011年03月12日 18:19:18 作者：

由于javascript無法獲取img文件頭數(shù)據(jù)，必須等待其加載完畢后才能獲取真實(shí)的大小，所以lightbox類效果為了讓圖片居中顯示，導(dǎo)致其速度體驗(yàn)要比直接輸出的差很多。

而本文所提到的預(yù)加載技術(shù)主要是讓javascript快速獲取圖片頭部數(shù)據(jù)的尺寸。

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

 
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應(yīng)用程序區(qū)別于桌面應(yīng)用程序，響應(yīng)速度才是最好的用戶體驗(yàn)。如果想要速度與優(yōu)雅兼得，那就必須提前獲得圖片尺寸，如何在圖片沒有加載完畢就能獲取圖片尺寸？
十多年的上網(wǎng)經(jīng)驗(yàn)告訴我：瀏覽器在加載圖片的時候你會看到圖片會先占用一塊地然后才慢慢加載完畢，并且這里大部分的圖片都是沒有預(yù)設(shè)width與height屬性的，因?yàn)闉g覽器能夠獲取圖片的頭部數(shù)據(jù)。基于此，只需要使用javascript定時偵測圖片的尺寸狀態(tài)便可得知圖片尺寸就緒的狀態(tài)。
實(shí)現(xiàn)代碼（2011-03-11更新）：
2011-03-12 更新：
只使用一定時器，優(yōu)化性能

復(fù)制代碼代碼如下:

 
/*! 
* img ready v0.3 
* http://www.planeart.cn/?p=1121 
* TangBin - MIT Licensed 
*/ 
// 圖片頭數(shù)據(jù)加載就緒事件 
// @param {String} 圖片路徑 
// @param {Function} 獲取尺寸的回調(diào)函數(shù) (參數(shù)1接收width；參數(shù)2接收height) 
// @param {Function} 加載錯誤的回調(diào)函數(shù) (可選) 
(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; 
// 如果圖片被緩存，則直接返回緩存數(shù)據(jù) 
if (img.complete) return callback(img.width, img.height); 
// 向頁面插入隱秘圖像，用來監(jiān)聽圖片是否占位 
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(); 
}; 
// 檢測圖片是否已經(jīng)占位 
check = function () { 
offsetWidth = img.offsetWidth; 
offsetHeight = img.offsetHeight; 
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) { 
end(); 
callback(offsetWidth, offsetHeight); 
}; 
}; 
check.url = url; 
// 操作結(jié)束后進(jìn)行清理 
// 刪除元素與事件，避免IE內(nèi)存泄漏 
end = function () { 
check.end = true; 
img.onload = img.onerror = null; 
div.innerHTML = ''; 
div.parentNode.removeChild(div); 
}; 
// 將檢測圖片是否占位的函數(shù)加入定時器列隊(duì)定期執(zhí)行 
// 同一圖片只加入一個檢測器 
// 無論何時只允許出現(xiàn)一個定時器，減少瀏覽器性能損耗 
!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內(nèi))瀏覽級別的圖片能達(dá)到秒殺效果。
好了，請觀賞令人愉悅的 DEMO ： http://demo.jb51.net/js/2011/imgready/
（通過測試的瀏覽器：Chrome、Firefox、Safari、Opera、IE6、IE7、IE8）
來自:: 唐斌

您可能感興趣的文章: