51CTO推薦專題：JavaScript學(xué)習(xí)筆記 有問有答

一段典型的使用預(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ōu)雅兼得，那就必須提前獲得圖片尺寸，如何在圖片沒有加載完畢就能獲取圖片尺寸?

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

實現(xiàn)代碼：

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

是不是很簡單?這樣的方式獲取攝影級別照片尺寸的速度往往是onload方式的幾十多倍，而對于web普通(800×600內(nèi))瀏覽級別的圖片能達到秒殺效果。

好了，請觀賞令人愉悅的 DEMO ，通過測試的瀏覽器：Chrome、Firefox、Safari、Opera、IE6、IE7、IE8。
 

原文鏈接：http://www.planeart.cn/?p=1121

【編輯推薦】

1. 示例：JavaScript中的后續(xù)傳遞風(fēng)格
2. JavaScript中同名標(biāo)識符優(yōu)先級詳解
3. 淺析JavaScript繼承方式
4. 如何編寫高質(zhì)量的JavaScript代碼
5. 通過JavaScript或PHP檢測Android設(shè)備