今天遇到一個問題，用jQuery去讀取圖片的寬、高資訊，用$('#theImage')可以讀取到圖片物件，但是讀出圖片的寬、高，卻都是0。

不過如果按了F5，reload一次，卻又讀得到寬、高了。查了一下這時圖片的response是304，也就是說它是讀cache的圖片，所以讀得到，但是第一次讀的時候，是直接從網路下載的，所以讀不到。

推算起來，可能和時間差有關。有了方向之後，開始google，終於找到解答。
問題發生的原因在於，圖片本身體積較大，所以用jQuery去讀取的時候，其實下載還沒完成。

因此為了確保下載完成再讀取寬、高的資訊，就必須監聽下載完成的動作。所幸用jQuery來處理的話，這個動作很簡單。

$('#theImage').load(function(){
    console.log($(this).width());
});

這樣一來，就能確保圖片是在下載完成後，才去讀取圖片相關資訊。

另外，今天在google時，發現「使用 jQuery(document).ready() 與 window.onload 注意事項」這篇文章，算是意外的收獲，對於使用lazyload這個著名的plugin在處理圖片時，容易發生的一些狀況和解決辦法，值得一讀。

其實在寫Flash時，這種時間差的問題通常會考慮到，ActionScript在Event物件上規劃的很完備，所以通常不會失手。反倒是在JavaScript一時不察，花了不少時間在這上面啊!