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

[mmis1000 (秋月戀楓)]

如題，這兩天看到有關canvas的文章，
想說可以試著拿來做個小遊戲

所以我試著用drawImage繪製圖片到畫布上

但有一個問題是

必須要等圖片讀取完，才有辦法呼叫drawImage繪製圖片到canvas上
所以我把繪製圖片函數掛在Image()物件的onload上

到這邊都還能正常運作

但當我試圖加入第二個圖片時，問題就來了，
因為onload是非同步事件，
所以添加事件跟讀取完成，
呼叫事件的順序不一定是一樣的

結果有時原本應該要被畫在上面的圖案，反而跑到下面去
http://jsfiddle.net/mmis1000/7bJHP/6/
(ie不支援跨域請求，會看不到)
造成顯示的結果跟預期不一樣

所以我想問的是，除了自己刻以外，
有沒有什麼現成的函數庫，
可以做到，

當指定追蹤的物件都讀取完成時，
呼叫特定的函數，這樣的功能？

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 140.116.130.56
推 Fantasywind:做個 Counter 不就好?
→ mmis1000:但為每個元素寫一次函數，似乎不太值得，手刻counter
→ mmis1000:也不好看，所以才問說有沒有什麼比較漂亮的寫法
→ TonyQ:找找 promise,when
推 Fantasywind:每個request互相不知道存在 必須有counter溝通
→ TonyQ:jQuery 的話可以看看 Deferred
→ Fantasywind:或是用promise的方法 但是效能會差點
→ TonyQ:我覺得 promise 的問題不在校能，主要在量大時記憶體吃重。
→ TonyQ:sample http://jsfiddle.net/GgnEc/2/
→ danny8376:上面回答完了www
→ danny8376:counter版 http://jsfiddle.net/danny8376/8d7k3/1/
→ mmis1000:最後決定這樣做 http://jsfiddle.net/mmis1000/Z3C4C/2/
→ mmis1000:再問一個問題，如果元素讀取失敗，有辦法觸發特定事件嗎
→ danny8376:onerror