Delay in images Display, page goes blank - php

Question

I am struggling with my custom Javascript / Jquery code.
My code currently takes foldername, imagename, url dynamically from a PHP variable and passed to a function slideShow().
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.
Working copy of the page is here 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">--><img src="'+path+sysFile1[3]+'" border="0" width="200" height="200"><br><b>'+imName[3]+'</b><!--</marquee>-->';
}
else
{
imName[i] = imName[i].replace('_',' ');
myArr[0] = '<!--<marquee behavior="slide" scrollamount="10">--><img src="'+path+sysFile1[i]+'" border="0" width="200" height="200"><br><b>'+imName[i]+'</b><!--</marquee>-->';
//}
}
if(i+1>=arrLen)
{
imName[2] = imName[2].replace('_',' ');
myArr[1] = '<!--<marquee behavior="slide" scrollamount="10">--><img src="'+path+sysFile1[2]+'" border="0" width="200" height="200"><br><b>'+imName[2]+'</b><!--</marquee>-->';
}
else
{
imName[i+1] = imName[i+1].replace('_',' ');
myArr[1] = '<!--<marquee behavior="slide" scrollamount="10">--><img src="'+path+sysFile1[i+1]+'" border="0" width="200" height="200"><br><b>'+imName[i+1]+'</b><!--</marquee>-->';
//}
}
if(i+2>=arrLen)
{
imName[1] = imName[1].replace('_',' ');
myArr[2] = '<!--<marquee behavior="slide" scrollamount="10">--><img src="'+path+sysFile1[1]+'" border="0" width="200" height="200"><br><b>'+imName[1]+'</b><!--</marquee>-->';
}
else
{
imName[i+2] = imName[i+2].replace('_',' ');
myArr[2] = '<!--<marquee behavior="slide" scrollamount="10">--><img src="'+path+sysFile1[i+2]+'" border="0" width="200" height="200"><br><b>'+imName[i+2]+'</b><!--</marquee>-->';
//}
}
if(i+3>=arrLen)
{
imName[0] = imName[0].replace('_',' ');
myArr[3] = '<!--<marquee behavior="slide" scrollamount="10">--><img src="'+path+sysFile1[0]+'" border="0" width="200" height="200"><br><b>'+imName[0]+'</b><!--</marquee>-->';
}
else
{
imName[i+3] = imName[i+3].replace('_',' ');
myArr[3] = '<!--<marquee behavior="slide" scrollamount="10">--><img src="'+path+sysFile1[i+3]+'" border="0" width="200" height="200"><br><b>'+imName[i+3]+'</b><!--</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

Have you tried calling slidehow onLoad on the client side?
http://api.jquery.com/ready/
In the case above:
$(document).ready(function() {
document.slideShow(params);
});
This will avoid all the timeouts messing up with other Javascript files from being fetched/loaded/executed.