在你设计网页的时候，在网页刷新的时候，是不是经常碰到有些图片加载很慢，或者出现白色的闪现导致给人的视觉印象不够好。如果你碰到这种情况你可以看看我这篇博客，试试js添加图片缓存。
先上代码
var st=require.toUrl("com/hdsx/jsviewer/themes/darkangel/images/login");
var image_arr = ["2.jpg", "3.jpg", "4.jpg"]
function load(){
loadImage(st + "/" + image_arr[0], function(res){
if(res.msg === "ok"){
image_arr.shift();
if(image_arr.length>0){
load();
}
}
});
}
function loadImage(src,callback){
var imgloader= new Image();
//当图片成功加载到浏览器缓存
imgloader.onload =function(evt){
if(typeof(imgloader.readyState)=='undefined'){
imgloader.readyState = 'undefined';
}
//在IE8以及以下版本中需要判断readyState而不是complete
if((imgloader.readyState=='complete'||imgloader.readyState=="loaded")||imgloader.complete){
callback({'msg':'ok','src':src});
}else{
imgloader.onreadystatechange(evt);
}};
imgloader.onerror = function(evt){
callback({'msg':'error'});
};
imgloader.src=src;
}
load();
讲道理，简书这个代码输入框对代码的输入太不友好，我从webstorm上复制代码到这里，代码就变成了一行了，格式什么还得自己慢慢调。感觉以后不能复制一些长代码了。
代码如上显示，这段代码不多，很简单。我来依次介绍一下。
最上面st和image_arr两个变量设置的是图片的路径。
load()函数其实就是一个循环函数，循环调用缓存函数。这里我就讲一个.shift()，这个数组属性作用是删除当前数组的第一个数组内容，并把之后的内容移上去。比如image_arr.shift()就是删除image_arr[0]的内容，并把后面的内容向前移动一位。
接下来是loadImage函数，首先构建一个Image()对象。中间那几步其实都是一些验证过程，确保缓存过程正常进行。最后imgloader.src=src，把图片进行缓存。OK，后面再加载图片的时候就会直接读取缓存当中的图片，不会再出现慢或者白色闪现的问题了。
