当我们需要多多图片的处理时候,很可能我们会会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使用我这里就不多说了