Javascript实现图片预加载【回调函数，多张图片】

深藏阁楼爱情的钟 2022-08-18 14:11 180阅读 0赞

使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中，需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时，就需要考虑把这个功能封装为一个通用方法。

（1）下面为JS实现图片预加载方法loadImages()：

Js代码   ![收藏代码][icon_star.png]

1.  //实现一系列图片的预加载  
2.  //参数sources:图片信息关联数组  
3.  //参数callback:回调函数——图片预加载完成后立即执行此函数。  
4.  **function** loadImages(sources, callback)\{  
5.      **var** count = 0,  
6.          images =\{\},  
7.          imgNum = 0;  
8.      **for**(src **in** sources)\{  
9.          imgNum++;  
10.     \}  
11.     **for**(src **in** sources)\{  
12.         images\[src\] = **new** Image();  
13.         images\[src\].onload = **function**()\{  
14.             **if**(++count >= imgNum)\{  
15.                 callback(images);  
16.             \}  
17.         \}  
18.         images\[src\].src = sources\[src\];  
19.     \}  
20. \}

（2）在JS中调用预加载函数：

Js代码   ![收藏代码][icon_star.png]

1.  //存储图片链接信息的关联数组  
2.  **var** sources = \{  
3.      ietoHell : "img/IEtoHell.jpg",  
4.      fuckIE : "img/fuckIE.jpg"  
5.   \};  
6.    
7.  //调用图片预加载函数，实现回调函数  
8.   loadImages(sources, **function**(images)\{  
9.  //TO-DO something  
10.     ctx.drawImage(images.ietoHell, 20,20,100,100);  
11.     ctx.drawImage(images.fuckIE, 140,20,100,100);  
12.  \});

注意事项：

**（1）先绑定image.onload事件，后加载图片**

Js代码   ![收藏代码][icon_star.png]

1.  images\[src\] = **new** Image();  
2.  images\[src\].onload = **function**()\{  
3.      **if**(++count >= imgNum)\{  
4.          callback(images);  
5.      \}  
6.  \}  
7.  images\[src\].src = sources\[src\];

**原因：**如果图片从缓存中加载，速度非常快以至于没来得及绑定事件就加载完毕，自然不会触发绑定事件。

**（2）for...in循环 与 for循环的区别**

for循环用于迭代数组（array）

for...in循环用于迭代对象（object, \{\}）或者关联数组（hash array）

源引：http://taro.iteye.com/blog/1562901

[icon_star.png]: /images/20220731/964353616780491f8737b305e3e3b296.png