在你設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，在網(wǎng)頁(yè)刷新的時(shí)候，是不是經(jīng)常碰到有些圖片加載很慢，或者出現(xiàn)白色的閃現(xiàn)導(dǎo)致給人的視覺(jué)印象不夠好。如果你碰到這種情況你可以看看我這篇博客，試試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();
    //當(dāng)圖片成功加載到瀏覽器緩存
    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();

講道理，簡(jiǎn)書這個(gè)代碼輸入框?qū)Υa的輸入太不友好，我從webstorm上復(fù)制代碼到這里，代碼就變成了一行了，格式什么還得自己慢慢調(diào)。感覺(jué)以后不能復(fù)制一些長(zhǎng)代碼了。
代碼如上顯示，這段代碼不多，很簡(jiǎn)單。我來(lái)依次介紹一下。
最上面st和image_arr兩個(gè)變量設(shè)置的是圖片的路徑。
load()函數(shù)其實(shí)就是一個(gè)循環(huán)函數(shù)，循環(huán)調(diào)用緩存函數(shù)。這里我就講一個(gè).shift()，這個(gè)數(shù)組屬性作用是刪除當(dāng)前數(shù)組的第一個(gè)數(shù)組內(nèi)容，并把之后的內(nèi)容移上去。比如image_arr.shift()就是刪除image_arr[0]的內(nèi)容，并把后面的內(nèi)容向前移動(dòng)一位。
接下來(lái)是loadImage函數(shù)，首先構(gòu)建一個(gè)Image()對(duì)象。中間那幾步其實(shí)都是一些驗(yàn)證過(guò)程，確保緩存過(guò)程正常進(jìn)行。最后imgloader.src=src，把圖片進(jìn)行緩存。OK，后面再加載圖片的時(shí)候就會(huì)直接讀取緩存當(dāng)中的圖片，不會(huì)再出現(xiàn)慢或者白色閃現(xiàn)的問(wèn)題了。