Delay in images Display, page goes blank
<p>I am struggling with my custom Javascript / Jquery code.</p>

<p>My code currently takes foldername, imagename, url dynamically from a PHP variable and  passed to a function <code>slideShow()</code>.</p>

<p>The following code works but shows a blank screen at the start and after the first cycle of images is completed. I understand that if all the images need to be loaded before they can be displayed, there will be a slight delay. Watch the cycle of the images, after cycling 7-8 times, the pages goes blank for 5 seconds before displaying again.</p>

<p>Working copy of the page is here <a href="http://tinyurl.com/8yqwvqs" rel="nofollow">http://tinyurl.com/8yqwvqs</a></p>

<pre><code>    &lt;script type="text/javascript"&gt;
        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&lt;image.length-1;i++)

             {

                 (function(i) {


               setTimeout(function() {

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

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

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

                    //}
                }

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

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

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

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

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


                  for(p=0;p&lt;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);



    &lt;/script&gt;

    &lt;table border="0" width="435px" bgcolor="#ECECEC"&gt;
      &lt;tr&gt;
      &lt;td&gt;

      &lt;/td&gt;
        &lt;td  style="border:none; text-align:center"&gt;

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


        &lt;/td&gt;
           &lt;td&gt;
           &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
</code></pre>
