會員中心 | iThome online | iT邦部落格 | 小7聚樂部 | iThome download | apphome

載入中...

chetbaker

iT邦初學者
8級

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

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

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

推算起來,可能和時間差有關。有了方向之後,開始google,終於找到解答。


發佈到:發佈到Facebook 發佈到噗浪 發佈到twitter
分享時間:2012-05-16 00:04:05
最近更新:2012-05-16 00:13:55
▼ ADVERTISEMENT ▼
分享內容
5
問題發生的原因在於,圖片本身體積較大,所以用jQuery去讀取的時候,其實下載還沒完成。

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

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


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

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

其實在寫Flash時,這種時間差的問題通常會考慮到,ActionScript在Event物件上規劃的很完備,所以通常不會失手。反倒是在JavaScript一時不察,花了不少時間在這上面啊!
利用jQuery的load功能,確保image載入後才讀取圖片資訊

目前沒有資料

回應

請填寫您的回應,長度限為1,000個字,回應不計點數,也不限使用次數



 

檢舉違規

違規事項:

*補充檢舉理由(可省略),字數不可超過100字

推薦

推薦理由:


*給分享者的鼓勵(可不填),字數不可超過100字

哈哈
毆飛
開心
抗議
落寞
睡覺
噴鼻血
No
失神
爆氣
疑惑
Orz
不耐煩
喜歡
臉紅
噎到
放手
打嗑睡
掰掰
放馬過來
敲碗
簽名
筆記
拍手
沙發
XD
無言
偷笑
翻桌
謝謝
灑花
抱抱
逃跑
炸死你
愛你
生日快樂
rock
嘆氣
下雨
衝刺
搖頭
拍照
打球
健身
駭客
射門
泡湯
踹共
唱歌
做菜

上傳圖片
▼ ADVERTISEMENT ▼

邦友收藏動態

最新收藏最多人推最多人收

新增收藏

收藏到iT邦 書籤小工具

「收藏到iT邦」讓你更方便收藏站外文章。可用下面其中一種方法安裝:

  • 拖拉上面的「收藏到iT邦」連結到瀏覽器的書籤列
  • 在連結上方按右鍵,選擇「加到我的最愛」

之後看到喜歡的站外文章,只要點一下「收藏到iT邦」,就會收藏起來囉

安裝「收藏快捷鍵」

安裝「收藏快捷鍵」,可以讓邦友直接透過Google工具列上的按扭,快速收藏站內、站外的網頁。

訂閱每日摘要

iT邦幫忙即日起提供「每日摘要」給尚未註冊的邦友,只要輸入您的E-mail,每日就可以收到最新的發問與分享