Javascript实现图片预加载【回调函数，多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中，需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时，就需要考虑把这个功能封装为一个通用方法。（1）下面为JS实现图片预加载方法loadImages()：
//实现一系列图片的预加载//参数sources:图片信息关联数组//参数callback:回调函数——图片预加载完成后立即执行此函数。function loadImages(sources, callback){ var count = 0, images ={}, imgNum = 0; for(src in sources){ imgNum++; } for(src in sources){ images = new Image(); images.onload = function(){ if(++count >= imgNum){ callback(images); } } images.src = sources; }}
（2）在JS中调用预加载函数：
//存储图片链接信息的关联数组var sources = { ietoHell : "img/IEtoHell.jpg", fuckIE : "img/fuckIE.jpg" };//调用图片预加载函数，实现回调函数 loadImages(sources, function(images){//TO-DO something ctx.drawImage(images.ietoHell, 20,20,100,100); ctx.drawImage(images.fuckIE, 140,20,100,100); });
注意事项：
（1）先绑定image.onload事件，后加载图片
images = new Image();images.onload = function(){ if(++count >= imgNum){ callback(images); }}images.src = sources; 原因：如果图片从缓存中加载，速度非常快以至于没来得及绑定事件就加载完毕，自然不会触发绑定事件。
（2）for...in循环 与 for循环的区别
for循环用于迭代数组（array）
for...in循环用于迭代对象（object, {}）或者关联数组（hash array）
页:
[1]