圖片預加載

 function  preload(callback) {  
 　　var imageObj = new Image(); 
 　　images = new Array(); 
 　　images[0]="pre_image1.jpg"; 
 　　images[1]=" pre_image2.jpg"; 
 　　images[2]=" pre_image3.jpg"; 
　　 for(var i=0; i<=2; i++) { 
   　　　 imageObj.src=images[i]; 
 　　 　　if (imageObj.complete) { // 若是圖片已經存在於瀏覽器緩存，直接調用回調函數
      　 　　callback.call(imageObj); 
   　　　 } else { 
　　  　　　　imageObj.onload = function () {// 圖片下載完畢時異步調用 callback 函數
         　　　　callback.call(imageObj);// 將回調函數的 this 替換爲 Image 對象
   　　  　　}; 
 　　　　 } 
　　 } 
 } 
 function callback(){ 
  　　alert(this.src + 「已經加載完畢 , 能夠在這裏繼續預加載下一組圖片」); 
 }

 CSS(background)、JS(Image)、HTML(<img />)均可以。經常使用的是new Image();，設置其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，一樣的src就會使用緩存，這是最基本也是最實用的預載方法