獲取圖片真實大小

lightbox類效果為了讓圖片居中顯示而使用預載入，需要等待完全載入完畢才能顯示，體驗不佳（如filick相簿的全屏效果）。javascript無法獲取img檔案頭資料，真的是這樣嗎？本文通過一個巧妙的方法讓javascript獲取它。

這是大部分人使用預載入獲取圖片大小的例子：

`01`	`var` `imgLoad =` `function` `(url, callback) {`

`02`	`var` `img =` `new` `Image();`

03

`04`	`img.src = url;`

`05`	`if` `(img.complete) {`

`06`	`callback(img.width, img.height);`

`07`	`}` `else` `{`

`08`	`img.onload =` `function` `() {`

`09`	`callback(img.width, img.height);`

`10`	`img.onload =` `null;`

11 };

12 };

13

14 };

可以看到上面必須等待圖片載入完畢才能獲取尺寸，其速度不敢恭維，我們需要改進。

web應用程式區別於桌面應用程式，響應速度才是最好的使用者體驗。如果想要速度與優雅兼得，那就必須提前獲得圖片尺寸，如何在圖片沒有載入完畢就能獲取圖片尺寸？

十多年的上網經驗告訴我：瀏覽器在載入圖片的時候你會看到圖片會先佔用一塊地然後才慢慢載入完畢，並且不需要預設width與height屬性，因為瀏覽器能夠獲取圖片的頭部資料。基於此，只需要使用javascript定時偵測圖片的尺寸狀態便可得知圖片尺寸就緒的狀態。

當然實際中會有一些相容陷阱，如width與height檢測各個瀏覽器的不一致，還有webkit new Image()建立的圖片會受以處在載入程序中同url圖片影響，經過反覆測試後的最佳處理方式：