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

看板Ajax作者 (秋月戀楓)時間10年前 (2013/12/17 20:21), 編輯推噓2(2012)
留言14則, 4人參與, 最新討論串1/1
如題,這兩天看到有關canvas的文章, 想說可以試著拿來做個小遊戲 所以我試著用drawImage繪製圖片到畫布上 但有一個問題是 必須要等圖片讀取完,才有辦法呼叫drawImage繪製圖片到canvas上 所以我把繪製圖片函數掛在Image()物件的onload上 到這邊都還能正常運作 但當我試圖加入第二個圖片時,問題就來了, 因為onload是非同步事件, 所以添加事件跟讀取完成, 呼叫事件的順序不一定是一樣的 結果有時原本應該要被畫在上面的圖案,反而跑到下面去 http://jsfiddle.net/mmis1000/7bJHP/6/ (ie不支援跨域請求,會看不到) 造成顯示的結果跟預期不一樣 所以我想問的是,除了自己刻以外, 有沒有什麼現成的函數庫, 可以做到, 當指定追蹤的物件都讀取完成時, 呼叫特定的函數,這樣的功能? -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.116.130.56

12/17 20:39, , 1F
做個 Counter 不就好?
12/17 20:39, 1F

12/17 20:44, , 2F
但為每個元素寫一次函數,似乎不太值得,手刻counter
12/17 20:44, 2F

12/17 20:45, , 3F
也不好看,所以才問說有沒有什麼比較漂亮的寫法
12/17 20:45, 3F

12/17 20:54, , 4F
找找 promise,when
12/17 20:54, 4F

12/17 20:55, , 5F
每個request互相不知道存在 必須有counter溝通
12/17 20:55, 5F

12/17 20:55, , 6F
jQuery 的話可以看看 Deferred
12/17 20:55, 6F

12/17 20:55, , 7F
或是用promise的方法 但是效能會差點
12/17 20:55, 7F

12/17 21:05, , 8F
我覺得 promise 的問題不在校能,主要在量大時記憶體吃重。
12/17 21:05, 8F

12/17 21:09, , 9F
12/17 21:09, 9F

12/17 21:20, , 10F
上面回答完了www
12/17 21:20, 10F

12/17 21:21, , 11F
12/17 21:21, 11F

12/18 00:25, , 12F
12/18 00:25, 12F

12/18 00:45, , 13F
再問一個問題,如果元素讀取失敗,有辦法觸發特定事件嗎
12/18 00:45, 13F

12/18 01:28, , 14F
onerror
12/18 01:28, 14F
文章代碼(AID): #1Ii47REV (Ajax)