var image = new Image();
image.src = "apple.jpg";

我以為可以這樣獲取圖片的寬高值：

console.log("image", image);
console.log("image.src", image.src);
var height = image.height;
console.log("image.height", height);
console.log("image.naturalHeight", image.naturalHeight);
var width = image.width;
console.log("image.width", width);
console.log("image.naturalWidth", image.naturalWidth);
 

在某些電腦上的谷歌瀏覽器和IE11瀏覽器上，以上程式碼工作正常。但是火狐在第一次開啟時卻報出寬高值均為0。如果按F5重新整理頁面，火狐又能正確獲取寬高值了。按Ctrl+F5忽略快取的話，仍能復現這個問題。

這是因為火狐對於JS非同步執行非常快。當載入image.src = "apple.jpg";時，火狐已經開始執行var height = image.height;了。而且這與DOM無關，完全是javascript和瀏覽器的問題。

這個問題也與圖片不大相關。你可以用一個BASE64編碼的src做實驗，結論相同。

image.onload = function() {
console.log("image", image);
console.log("image.src", image.src);
var height = image.height;
console.log("image.height", height);
console.log("image.naturalHeight", image.naturalHeight);
var width = image.width;
console.log("image.width", width);
console.log("image.naturalWidth", image.naturalWidth);
}
 

注意不僅僅是火狐有這個問題，Chrome和IE11都有這個問題。我在自己的電腦上執行以上程式碼，發現得到的結果與在公司電腦上執行的結果完全不同。

在我自己的電腦上，所有瀏覽器在沒有image.onload的情況下都返回0。谷歌瀏覽器即使在頁面和圖片都快取了的情況下也返回0，而IE11返回0或者正確值的情況隨機。

所以當你需要獲取圖片資訊時，記得使用事件image.onload來保證結果正確。