I have this code that runs 5 fading images with text, each linking to a specific web page. The code works fine, or seemed to until I realized that each time a new image was loaded (every 8 seconds), the page would reload. My page views went through the roof and my site performance lagged.

Anyone who knows what I could do in order to not have the script reload the page each time, please respond code is below:


// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.

// Modified by Matt Breitkreutz for CIO Inc.

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 8000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array();



Picture[0] = 'images/wbw_kwikkopy.gif'
Picture[1] = 'images/wbw_proimage.gif'
Picture[2] = 'images/wbw_aamco.gif'
Picture[3] = 'images/wbw_dollarsbydesign.gif'
Picture[4] = 'images/wbw_360solutions.gif'

links = new Array(
'/index.cfm/fa/adpage/client_id/605/lsource/13',
'/index.cfm/fa/adpage/client_id/387/lsource/13',
'/index.cfm/fa/adpage/client_id/528/lsource/13',
'/index.cfm/fa/adpage/client_id/922/lsource/13',
'/index.cfm/fa/adpage/client_id/2005/lsource/13'
);

if (document.images) {
theImages = new Array(5);
for (i=0, n=theImages.length; i<n; i++) {
theImages[i] = new Image();
theImages[i].src=Picture[i];
}
}
var CurrentImage = -1;
var NextImage = -1;
var Run = true;
var speed = 8000; // 8 seconds

function animate(wbw_num) {
CurrentImage = parseInt(wbw_num);
// window.alert('*'+CurrentImage+'*');
// if (CurrentImage > theImages.length-1) CurrentImage=-1;

if (!document.images) return;
if (!Run) return;
document.images["PictureBox"].style.filter="blendTrans(duration=1)";
document.images["PictureBox"].style.filter="blendTrans(duration=CrossFadeDuration)";
document.images["PictureBox"].filters.blendTrans.Apply();
document.images.PictureBox.filters.blendTrans.Play();
//jss = jss + 1;
//if (jss > (pss)) jss=1;
if (CurrentImage > theImages.length-2) CurrentImage=-1;
CurrentImage++;
NextImage++;
//window.alert('*'+CurrentImage+'*');
document.images["PictureBox"].src = theImages[CurrentImage].src;

//window.alert('*'+CurrentImage+'*');
NextImage = CurrentImage;
setTimeout('animate(NextImage)',speed);
}

function go() {
window.open(links[NextImage],'_parent');
}

var tss;
var iss;
var jss = Math.round(Math.random()*4) + 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}



There is a body onload function onLoad="animate();"


an image inside the document initiates the code:

<a href="javascript:go();"><img src="images/<cfoutput>#wbw_image#</cfoutput>" border="0" name="PictureBox">

Hope this makes some sense.

Thanks much.