[問題] 如何判斷圖片全部讀取完成?

作者: mmis1000 (秋月戀楓)   2013-12-17 20:21:37
如題,這兩天看到有關canvas的文章,
想說可以試著拿來做個小遊戲
所以我試著用drawImage繪製圖片到畫布上
但有一個問題是
必須要等圖片讀取完,才有辦法呼叫drawImage繪製圖片到canvas上
所以我把繪製圖片函數掛在Image()物件的onload上
到這邊都還能正常運作
但當我試圖加入第二個圖片時,問題就來了,
因為onload是非同步事件,
所以添加事件跟讀取完成,
呼叫事件的順序不一定是一樣的
結果有時原本應該要被畫在上面的圖案,反而跑到下面去
http://jsfiddle.net/mmis1000/7bJHP/6/
(ie不支援跨域請求,會看不到)
造成顯示的結果跟預期不一樣
所以我想問的是,除了自己刻以外,
有沒有什麼現成的函數庫,
可以做到,
當指定追蹤的物件都讀取完成時,
呼叫特定的函數,這樣的功能?
作者: Fantasywind (Fantasywind)   2013-02-17 20:39:00
做個 Counter 不就好?
作者: mmis1000 (秋月戀楓)   2013-02-17 20:44:00
但為每個元素寫一次函數,似乎不太值得,手刻counter也不好看,所以才問說有沒有什麼比較漂亮的寫法
作者: TonyQ (自立而後立人。)   2013-02-17 20:54:00
找找 promise,when
作者: Fantasywind (Fantasywind)   2013-02-17 20:55:00
每個request互相不知道存在 必須有counter溝通
作者: TonyQ (自立而後立人。)   2013-02-17 20:55:00
jQuery 的話可以看看 Deferred
作者: TonyQ (自立而後立人。)   2013-02-17 21:05:00
我覺得 promise 的問題不在校能,主要在量大時記憶體吃重。sample http://jsfiddle.net/GgnEc/2/
作者: danny8376 (釣到一隻猴子@_@)   2013-02-17 21:20:00
上面回答完了wwwcounter版 http://jsfiddle.net/danny8376/8d7k3/1/
作者: mmis1000 (秋月戀楓)   2013-02-18 00:25:00
最後決定這樣做 http://jsfiddle.net/mmis1000/Z3C4C/2/再問一個問題,如果元素讀取失敗,有辦法觸發特定事件嗎
作者: danny8376 (釣到一隻猴子@_@)   2013-02-18 01:28:00
onerror

Links booklink

Contact Us: admin [ a t ] ucptt.com