javascript如何獲取圖片的高度

本章節介紹一下如何獲取圖片的真是高度，通常都是採用如下方式:

[JavaScript] 純文字檢視 複製程式碼
var img = new Image();
img.src = url;  
img.width;

但是上面的程式碼往往會不能夠正確獲取結果，因為圖片需要載入完畢以後才能獲取尺寸，當圖片沒有載入完成那自然不行。

這個時候我們就想到了onload事件，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var img = new Image;
img.src = "test.gif";
img.onload = function(){
  console.log(img.width);
};

上面的程式碼在大多數瀏覽器中都能夠實現功能，但是並不完美。

在IE9以下的瀏覽器中，只能夠執行一次，如果再重新整理頁面就不會再輸出寬度。

這是因為IE9以下瀏覽器會把圖片快取起來，當再次讀取的時候是直接從快取取圖片，由於速度太快，當還沒有執行到img.onload = function()的時候圖片已經載入完成，自然也就不會觸發此事件了。程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var img = new Image;
img.onload = function(){
  console.log(img.width);
};
img.src = "zhannei.png";

只要調換一下程式碼的順序就可以順利達成我們的目標了。