Preload images for rotating slides

ok, ive been dabing in some rotating images, i got the images to rotate fine and each image having their own link when clicked on, it all looks good when i test it on my local machine, but when i upload to the webserver, the timer to switch to the next image switches images before the first one is done loading. Anyone got any help for me. Here is my image rotating code.

<script type=“text/javascript”>

var i = 0;

var imageArray = new Array();

//Create each element of the array as a unique object with a src and href parameter. This is quick and dirty; you could create an
//object ‘class’ for this… but… perhaps it’s overkill. You could also use a pair of arrays with matching subscripts.

var img0 = new Object( );

img0.src = “img0”;
img0.href = “specials.html”;

var img1 = new Object( );

img1.src = “img1”;
img1.href = “test2.html”;

var img2 = new Object( );

img2.src = “img2”;
img2.href = “specials.html”;

//Put all of those objects into the array.

imageArray[ 0 ] = img0;
imageArray[ 1 ] = img1;
imageArray[ 2 ] = img2;

function rotateImage()
{

if (i >= imageArray.length)
{
i = 0;
}

var img_element = document.images[“img”];
var a_element = img_element.parentNode;

img_element.src = imageArray[i].src;
a_element.href = imageArray[i].href;

i++;

setTimeout(“rotateImage()”, 4000);

}

</script>

This works, but you will need to create three images 100 x 100px and also the .html pages for links. I have separated the image objects from the link objects using two different arrays.

<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<script type=“text/javascript”>
<!–
// create array of image objects to preload images
var A = new Array();
A[0]=new Image(100,100); A[0].src=“img1.jpg”;
A[1]=new Image(100,100); A[1].src=“img2.jpg”;
A[2]=new Image(100,100); A[2].src=“img3.jpg”;
//
// create array of href references
var B=[“specials”,“test2”,“test3”];
//
// ========= end of variables ===============
var imgObj, pObj; // global
// shortcuts to target objects created on page load
function init()
{ imgObj=document.getElementById(“targetImg”);
pObj=document.getElementById(“targetP”);
}
// ========== end of init ===================
var counter= -1, ref; // global counter
function rotateImage()
{ counter++;
// check if at end of range. If so, reset
counter=(counter>2)?0 : counter;
imgObj.src=A[counter].src;

ref=B[counter]+".html"
pObj.innerHTML='&lt;a href="'+ref+'" target="_blank"&gt;'+B[counter]+'&lt;\\/a&gt;';
setTimeout("rotateImage()", 4000);

}
// ========== end of rotateImage =============
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, sans-serif; font-size:13px; font-weight:bold; color:#000; background-color:#FFF; }
#imgHolder { position:absolute; top:50px; left:50px; width:100px; text-align:center; }
#imgHolder p { margin-top:2px; margin-bottom:0px; }
#targetP a:link, #targetP a:visited { font-size:16px; font-weight:bold; color:#000080; text-decoration:underline; background-color:#FFF; }
#targetP a:hover { color:#F00; background-color:#FFF; }
–>
</style>
</head>

<body onload=" init(); rotateImage()">

<div id=“imgHolder”>
<p class=“a”>
<img id=“targetImg” border=“0” src=“img1.jpg” alt=“img” width=“100” height=“100”></p>
<p id=“targetP”><a href=“specials.html” target=“_blank”>specials</a></div>
<!-- end imgHolder –>

</body>

</html>

try putting the setTimeout() in a window.onload function because maybe all the images haven’t been preloaded from the web server when the 4 secs ticks over and calls rotateImage()

Actually, i just entered this into the head, and it worked.

<script>

/*
Preload images script
*/

var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

//Enter path of images to be preloaded inside parenthesis. Extend list as desired.
preloadimages(“images/familysmall.png”,“images/alaskapipesmall.png”,“images/emptysmall.png”)

</script>

Kalon, how would i go about doing that, im very green on this script stuff.