javascript预加载图片的处理（src无法加载图片）

当我们需要多多图片的处理时候，很可能我们会会new 一个Image()然后不停给他设置src用来修改图片的显示，但是这里有个问题。图片的加载是需要消耗时间的，很可能在我们设置完src去用它的时候并没有加载完成。（javascript 图片src一直失败（comple ==false））无论是requestAnimationFrame 还是setInterval或者setTimeOut 方法都可能循环执行完了但是图片加载并没有完成，这个在加载大图的时候特别明显。那么我们怎么处理呢？？？我们可以通过定义一个图片加载器在程序开始操作前先加载图片，主要的是根据javascript里面Image（）内有个onload方法可以用来判断是否加载完成；下面我先给大家展示我写的简单的图片加载器。

var imageLoader = {

    loaded:true,
    loadImages:0,
    totoalImages:0,
    load:function(url){
        this.totoalImages++;
        this.loaded = false;
        var loadimage = new Image();
        loadimage.src = url;
        loadimage.onload = function(){
            imageLoader.loadImages++;
            if(imageLoader.loadImages === imageLoader.totoalImages){

                imageLoader.loaded = true;

            }
        };
        return loadimage;
    }
};

onload在加载完成的时候才会进入函数体内。，我们可以通过loadImages/totoalImages来判断当前图片的进度。，当然进一步如何使用图片呢？？。我们可以定义一个MAP，

类似IOS中的dic 以图片名字作为关键字把加载器图片存起来。当用的时候直接拿出来使用即可。map使用我这里就不多说了