iT邦幫忙

5

利用jQuery的load功能,確保image載入後才讀取圖片資訊

今天遇到一個問題,用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一時不察,花了不少時間在這上面啊!


尚未有邦友留言

立即登入留言