如何預加載圖像，然後更改div內容，一旦完成圖像加載

Question

我想預加載一堆圖像，然後一旦它們完全加載，更改div的內容，這裏是我的代碼到目前爲止，但它只是讓我的瀏覽器陷入無限循環。任何幫助都會很棒。謝謝！

var mydir ='slideshow_pics/'; 
var myArray = new Array(); 
myArray[0] = mydir+'0.jpg'; 
myArray[1] = mydir+'1.jpg'; 
myArray[2] = mydir+'2.jpg'; 
myArray[3] = mydir+'3.jpg'; 
myArray[4] = mydir+'4.jpg'; 
myArray[5] = mydir+'5.jpg'; 
myArray[6] = mydir+'6.jpg'; 
myArray[7] = mydir+'7.jpg'; 

var myWidth = new Array(); 
myWidth[0] = '470'; 
myWidth[1] = '450'; 
myWidth[2] = '450'; 
myWidth[3] = '500'; 
myWidth[4] = '550'; 
myWidth[5] = '450'; 
myWidth[6] = '800'; 
myWidth[7] = '300'; 

var myCheck = new Array(); 

function preloader(images){ 
     var i = 0; 

     // start preloading 
     for(i=0; i<=images.length; i++){ 
      imageObj = new Image(); 
      imageObj.src=images[i]; 
      imageObj.onLoad = check(i, images.length); 
     }; 

    } 


function checkimg(data, w) { 
     p=0; 
     z=0; 
     o = 'no'; 
     var myImg = new Image(); 
     myImg.src = data; 

     while (p == 0) { 

      if (myImg.naturalWidth == w) { 
      p = 1; 
      o = 'yes'; 
      } 
     z++; 
     } 
return o; 

} 


function check(e,i) { 


     if(e == i){ 

      if (document.getElementById('myss') != null) { 

    //now we need to make sure each image is fully loaded 
    for(i=0; i<=myArray.length; i++){ 

     p=0; 
     z=0; 

     myCheck[i] = checkimg(myArray[i], myWidth[i]); 


    }//end foreach 

    if (myCheck.join('') == 'yesyesyesyesyesyesyesyes') { 

    document.getElementById('myss').innerHTML = '<embed src="RectangleSlideshow.swf" width="1028px" height="324px"></embed>'; 

     } 
    } 

     }; 
    } 

Answer 1

我相信你需要一種圖片預加載的圖片。 我在我的索引網頁實現代碼：

http://www.becomingthebeast.com/index.html

看看它是否適合你。