JS添加图片缓存

在你设计网页的时候，在网页刷新的时候，是不是经常碰到有些图片加载很慢，或者出现白色的闪现导致给人的视觉印象不够好。如果你碰到这种情况你可以看看我这篇博客，试试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，后面再加载图片的时候就会直接读取缓存当中的图片，不会再出现慢或者白色闪现的问题了。