[问题] 如何判断图片全部读取完成?

楼主: 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