js圖片預加載以及延遲加載

當我們需要做圖片輪播的時候，如果讓圖片提前下載到本地，用瀏覽器緩存起來，我們可以用Image對象：

function preLoadImg(){
  var img=new Image();
  img.src="url"  
}

通過調用preLoadImg方法。我們可以實現圖片預加載。但是如果想在圖片加載后做其他的異步操作，我們可以使用圖片的onload事件

function preLoadImg(url,callback){
      var img=new Image();
      img.src="url"  
      img.onload=function(){
        xx();
　　
    }  
}  
function test(){

　alert(img.width)

}
<button onclick="preLoadImg('a.jpg',test)">彈出圖片寬度</button>  

在firefox中測試一下,在圖片下載后，就會彈出圖片的寬度來。無論點擊多少次或者刷新結果都一樣。但是ie和opera就不同，點擊一次后面就沒有反應。
經過對多個瀏覽器版本的測試，發現ie6、opera都會這樣，而firefox和safari則表現正常。其實，原因也挺簡單的，就是因為瀏覽器的緩存了。當圖片加載過一次以后，如果再有對該圖片的請求時，由於瀏覽器已經緩存住這張圖片了，不會再發起一次新的請求，而是直接從緩存中加載過來。
對於 firefox和safari，它們視圖使這兩種加載方式對用戶透明，同樣會引起圖片的onload事件，而ie和opera則忽略了這種同一性，不會引 起圖片的onload事件，因此上邊的代碼在它們里邊不能得以實現效果。

那么這里我們就需要一個值來表明圖片是否已經下載。從瀏覽器緩存中調圖片不需要等待，表明已經下載，但是從http請求需要等待，這個值顯示未完成。剛好Image對象有個自帶的屬性complete.我們在onload事件之前對它做一個判斷即可。

function preLoadImg(url, callback) { 
　　var img = new Image(); //創建一個Image對象，實現圖片的預下載 
　　img.src = url; 
if (img.complete) { // 如果圖片已經存在於瀏覽器緩存，直接調用回調函數 
　　callback.call(img); 
　　return; // 直接返回，不用再處理onload事件 
} 
　　img.onload = function () { //圖片下載完畢時異步調用callback函數。 
　　　　callback.call(img);//將回調函數的this替換為Image對象 
　　}; 
}; 

最后是預加載大量圖片的方法

         var images = new Array()    
            function preLoadImg() {    
                for (i = 0; i <preLoadImg.arguments.length; i++) {    
                    images[i] = new Image()    
                    images[i].src = preLoadImg.arguments[i]    
                }    
            }    
            preLoadImg(    
                "http://source/1.jpg",    
                "http://source/2.jpg",    
                "http://source/3.jpg"  
            )        

此文借鑒了相關資料，為本人原創，轉載請注明出處！謝謝！