JavaScript實現圖片的預加載

由于圖片較大，在加載js腳本之前，最好實現圖片的預加載。

function preLoadImg(){


var img = new Image();

img.src = url;


}</pre> 
 

這樣子就實現了傳入圖片的url，圖片實現預加載

 

但是此時圖片的width 和length等皆為空，進行下一步處理。

function preLoadImg(){


var img = new Image();

img.src = url;

img.onload = function(){   //圖片異步加載完成，抵用callback函數

    callback.call(img);           //callback函數this指針切換成img

}


}</pre>

下一步考慮ie的兼容性

function preLoadImg(url,callback){


var img = new Image();

img.src = url;

if(img.complete){       //圖片已經存在于瀏覽器的緩存中了  并且complete兼容所有瀏覽器。

    callback.call(img);

    return;

}

img.onload = function(){   //圖片異步加載完成，抵用callback函數

    callback.call(img);           //callback函數this指針切換成img

}


}</pre>