Javascript实现图片预加载【回调函数，多张图片】-优快云博客

本文介绍了一种使用JavaScript实现图片预加载的方法，以确保动画效果流畅运行。通过封装通用预加载方法，简化了多个案例中的图片加载过程，并提供了关键注意事项，如绑定事件后再加载图片的重要性，以及for...in循环与for循环的区别。

使用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[src] = new Image();
        images[src].onload = function(){
            if(++count >= imgNum){
                callback(images);
            }
        }
        images[src].src = sources[src];
    }
}

（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[src] = new Image();
images[src].onload = function(){
    if(++count >= imgNum){
        callback(images);
    }
}
images[src].src = sources[src];

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

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

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

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