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

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

 

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

 

Js代码  

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代码  

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代码  

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）