js圖片預載入

圖片預載入有大體有幾種方式

1.html標簽或css載入圖片。

　　顯而易見我們使用img標簽或者通過標簽的background-image屬性都可以實現圖片的預載入。但是為了避免初次載入過多圖片影響體驗。一般最好在文檔渲染完成以後再載入（使用window.onload等）。

2.純js實現預載入

空城計-Code記的Javascript實現圖片的預載入的完整實現的預載入實例為

function preloadimages(arr){   
    var newimages=[], loadedimages=0
    var postaction=function(){}  //此處增加了一個postaction函數
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        if (loadedimages==arr.length){
            postaction(newimages) //載入完成用我們調用postaction函數並將newimages數組做為參數傳遞進去
        }
    }
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
        newimages[i].onload=function(){
            imageloadpost()
        }
        newimages[i].onerror=function(){
            imageloadpost()
        }
    }
    return { //此處返回一個空白對象的done方法
        done:function(f){
            postaction=f || postaction
        }
    }
}

　　原理就是迴圈創建Image對象，並設置對象的src為指定圖片，然後監聽圖片載入完成onload = function(){imageloadpost()}，當圖片載入完成後就會執行到imageloadpost。原來IE6還有一個問題：如果預載入的圖片已經在記憶體中則不會再次出發img.onload事件。但是IE7+都沒有問題了。其他瀏覽器也沒有問題，所以上面這種img.onload監聽事件已經沒有相容問題了。

3.Ajax實現預載入

　　ajax請求是任何數據都可以請求的，圖片也不例外。先看一下js/css預載入

　　　　// XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send(''); 

 　　而圖片的ajax預載入實際和純js預載入圖片一樣

new Image().src = "http://domain.tld/preload.png"; 

 　　只不過這裡的解釋成了ajax載入。可以理解new Image都是ajax get請求。

　　如果覺得本文不錯，請點擊右下方【推薦】！