圖像中的延遲顯示，頁面變爲空白

Question

我在使用我自定義的Javascript/Jquery代碼掙扎。

我的代碼當前從一個PHP變量中動態獲取文件夾名，圖像名稱，url並傳遞給函數slideShow()。

下面的代碼可以工作，但是在開始和第一次圖像循環完成後顯示一個空白屏幕。我明白，如果所有圖像都需要加載才能顯示，則會稍微延遲。觀看圖像的循環，循環7-8次後，頁面在空白處再次顯示5秒鐘。

工作頁面的副本是在這裏http://tinyurl.com/8yqwvqs

<script type="text/javascript"> 
     function RefreshPage(Period) 
     { 
      setTimeout("location.reload(true);", Period); 
     } 

      function slideShow(images,path,imageName,lnkUrl,sysFile,tim) 
      { 

      imName=imageName.split(","); 
      urlLink=lnkUrl.split(","); 
      image=images.split("|"); 
      sysFile1=sysFile.split(",") 
      var i=0; 
      l=0; 
      arrLen=image.length-1 
      var val=0; 


      for(i=0;i<image.length-1;i++) 

      { 

       (function(i) { 


       setTimeout(function() { 

       //alert(time); 
       var num_of_cat = 4; 
       var myArr = new Array(); 
       var temp=0; 
       if(i>=arrLen) 
       { 

       imName[3] = imName[3].replace('_',' '); 
       myArr[1] = '<!--<marquee behavior="slide" scrollamount="10">--><a href= "'+urlLink[3]+'" target="_top"><img src="'+path+sysFile1[3]+'" border="0" width="200" height="200"><br><b>'+imName[3]+'</b></a><!--</marquee>-->'; 
       } 
       else 
       { 
        imName[i] = imName[i].replace('_',' '); 
        myArr[0] = '<!--<marquee behavior="slide" scrollamount="10">--><a href="'+urlLink[i]+'" target="_top"><img src="'+path+sysFile1[i]+'" border="0" width="200" height="200"><br><b>'+imName[i]+'</b></a><!--</marquee>-->'; 
        //} 
       } 
       if(i+1>=arrLen) 
       { 
       imName[2] = imName[2].replace('_',' '); 
       myArr[1] = '<!--<marquee behavior="slide" scrollamount="10">--><a href="'+urlLink[2]+'" target="_top"><img src="'+path+sysFile1[2]+'" border="0" width="200" height="200"><br><b>'+imName[2]+'</b></a><!--</marquee>-->'; 
       } 
       else 
       { 

        imName[i+1] = imName[i+1].replace('_',' '); 
        myArr[1] = '<!--<marquee behavior="slide" scrollamount="10">--><a href="'+urlLink[i+1]+'" target="_top"><img src="'+path+sysFile1[i+1]+'" border="0" width="200" height="200"><br><b>'+imName[i+1]+'</b></a><!--</marquee>-->'; 

        //} 
       } 

       if(i+2>=arrLen) 
       { 
       imName[1] = imName[1].replace('_',' '); 
       myArr[2] = '<!--<marquee behavior="slide" scrollamount="10">--><a href="'+urlLink[1]+'" target="_top"><img src="'+path+sysFile1[1]+'" border="0" width="200" height="200"><br><b>'+imName[1]+'</b></a><!--</marquee>-->'; 
       } 
       else 
       { 

        imName[i+2] = imName[i+2].replace('_',' '); 
        myArr[2] = '<!--<marquee behavior="slide" scrollamount="10">--><a href="'+urlLink[i+2]+'" target="_top"><img src="'+path+sysFile1[i+2]+'" border="0" width="200" height="200"><br><b>'+imName[i+2]+'</b></a><!--</marquee>-->'; 
        //} 
       } 
       if(i+3>=arrLen) 
       { 

       imName[0] = imName[0].replace('_',' '); 

       myArr[3] = '<!--<marquee behavior="slide" scrollamount="10">--><a href="'+urlLink[0]+'" target="_top"><img src="'+path+sysFile1[0]+'" border="0" width="200" height="200"><br><b>'+imName[0]+'</b></a><!--</marquee>-->'; 
       } 
       else 
       { 

        imName[i+3] = imName[i+3].replace('_',' '); 
        myArr[3] = '<!--<marquee behavior="slide" scrollamount="10">--><a href="'+urlLink[i+3]+'" target="_top"><img src="'+path+sysFile1[i+3]+'" border="0" width="200" height="200"><br><b>'+imName[i+3]+'</b></a><!--</marquee>-->'; 
        //} 
       } 


        for(p=0;p<myArr.length;p++) 
        { 
        $('#place'+p).html(myArr[p]); 
        } 


       },i*6000); 

      })(i); 
       l=l+1; 
      } 
      var li; 
      li=arrLen+"0"; 
      li=li-15; 
      RefreshPage(li*750); 


      } 

      function clock(testArr){ 

       var myArr1=new Array(); 

       myArr1 = shuffle(testArr); 


       document.getElementById('place0').innerHTML = myArr1[0]; 
       document.getElementById('place1').innerHTML = myArr1[1]; 
       document.getElementById('place2').innerHTML = myArr1[2]; 
       document.getElementById('place3').innerHTML = myArr1[3]; 


       } 
slideShow('a.jpg|b.jpg|giftbasketcategory.jpg|homecategory.jpg|img_4903.jpg|kd-vwb-1.jpg|links.jpg|picnicpal-stackeddisplay2.jpg|pictures.jpg|siblingcategorycookie.jpg|weddingsketch.jpg|wooden-bowls.jpg|','./retailers/','Notecards ,Kids__,Baby Gifts ,Wedding Gifts,Wooden Bowls ,Home,Gift_Baskets,','http://abc.com/test.asp?Cat=1818,http://abc.com/test.asp?Cat=1822,http://abc.com/test.asp?Cat=1821,http://abc.com/test.asp?Cat=1819,http://abc.com/test.asp?Cat=1820,http://abc.com/test.asp?Cat=1823,http://abc.com/test.asp?Cat=1824,','IMG_4903.JPG,SiblingCategoryCookie.jpg,PicnicPal-StackedDisplay2.jpg,WeddingSketch.JPG,wooden-bowls.jpg,HomeCategory.JPG,GiftBasketCategory.JPG,',100); 



    </script> 

    <table border="0" width="435px" bgcolor="#ECECEC"> 
     <tr> 
     <td> 

     </td> 
     <td style="border:none; text-align:center"> 

      <table > 
      <tr> 
      <td> 
      <div style="width:200px; float:left; text-align:center; padding-left:7px;" id='place0'></div>     
      <div style="width:200px; float:left; text-align:center; padding-left:7px;" id="place1"></div> 
      </td> 
      </tr> 
      <tr><td><div style="width:200px; float:left; text-align:center; padding-left:7px;" id="place2"></div>     
      <div style="width:200px; float:left; text-align:center; padding-left:7px;" id="place3"></div></td></tr></table> 


     </td> 
      <td> 
      </td> 
     </tr> 
    </table> 

Answer 1

您是否嘗試過在客戶端調用slidehow的onLoad？

http://api.jquery.com/ready/

在上述情況下：

$(document).ready(function() { 
    document.slideShow(params); 
}); 

這將避免所有的超時從被獲取搞亂與其他Javascript文件/加載/執行。