用canvas的drawImage方法画入图片，怎么判断图片是否加载完成？

Question

想做一个进度条，显示资源加载的进度，所有图片加载完毕就100%，怎么做呢？

Answer 1

这种加载进度一般有两种写法：

一种是ajax加载，然后通过progress事件获取加载进度，然后在readystatechange事件里判断是否加载完成。这种方法比较通用，不限于图片，而且progress拿到的加载进度理论上更细，但缺点是代码写起来麻烦点；

另一种是通过直接new Image()，然后onload回调就是加载完成，接着设置src属性就开始加载了。这个缺点是得提前设置好“全部资源”和“已完成资源”两个变量，进度在onload里通过计算得到。不过鉴于图片资源一般都不大，所以都是用这个方法多些～

Answer 2

给image图片添加load事件。

img.addEventListener("load", function () {
   context.drawImage(img, x - 15, y - 15, 30, 30);
});
if (img.complete) {
   context.drawImage(img, x - 15, y - 15, 30, 30);
}