今天和大家探讨canvas动画框架之图片预加载，如上图的进度条，这可不是假的进度条，是真正能够实时获取图片加载进度的进度条。
为什么想要做这个进度条呢？canvas需要进度条么？答案显然是肯定的。我们的页面如果放到服务器上，图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话，那么用户肯定看不到理想的效果。
那么我们就来看看canvas图片预加载的实现（此处参考了网上一段代码，来源：）
当windows.onload发生后，我们定义一个存储着所有图片信息的对象sources，然后把它传入loadImages这个方法里。
重点是看看loadImages这个方法，它有两个参数，一个是存储的图片信息的sources，一个是回调函数callback（一旦图片加载完毕，即执行callback。我们这里执行的是main函数，意味着动画开始初始化）
总图片数我们存在numImages里面：
其实这个方法的核心就是给每张图片添加一个onload事件。
当每张图片加载完成后，我们做了三件事：
1.计算出加载完成图片与总图片的百分比；
2.然后画出一个用户可见的进度条，告诉用户加载的进度；
3.做判断看图片是否加载完，如加载完了就执行callback，否则返回error。
结构如下：
相关文章
精彩导读
热门资讯
关注我们
