51CTO推薦專題：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屬性的，因為瀏覽器能夠獲取圖片的頭部數據?；诖耍恍枰褂胘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);  
};  
 
}; 

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

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

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

【編輯推薦】

1. 示例：JavaScript中的后續傳遞風格
2. JavaScript中同名標識符優先級詳解
3. 淺析JavaScript繼承方式
4. 如何編寫高質量的JavaScript代碼
5. 通過JavaScript或PHP檢測Android設備