我正在努力使用自定义的Javascript / Jquery代码。
我的代码目前从PHP变量动态获取foldername，imagename，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>
答案 0 :(得分：-1)
您是否尝试过在客户端调用幻灯片onLoad？
在上面的案例中：
$(document).ready(function() {
document.slideShow(params);
});
这样可以避免因抓取/加载/执行其他Javascript文件而导致的所有超时。