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

问题描述

问 题

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

解决方案

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

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

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

这篇关于用canvas的drawImage方法画入图片，怎么判断图片是否加载完成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！