Image Preloading

[Josh Campbell]

I am using javascript to display random images. Whenever I load the page it shows broken images and then it loads the picture. My script is:

<script>
var Top = new Array("images/top_1.gif","images/top_2.gif","images/top_3.gif","images/top_4.gif");
var Bottom = new Array("images/bottom_1.gif","images/bottom_2.gif","images/bottom_3.gif","images/bottom_4.gif");
imgCt = Top.length;
function choosePictures()
{
if(document.images)
{
randomNum = Math.floor((Math.random() * imgCt));
document.imgTop.src = Top[randomNum];
document.imgBottom.src = Bottom[randomNum];
}
}
 </script>

My images look like this:
<img src="" name="imgTop" width="770" height="103" />
<img src="" name="imgBottom" width="770" height="25" />

The choosePictures() function is called in the body tag onload. If I set the src for both imgs to the first images it shows the first images and then about a second later loads the new random image. Is there a way to tell the browser to wait and display the page only whenever the images are done loading? I've searched javascript site but I don't understand alot of what they write. Thanks

[Algorithm]

If you give img tags a blank src, they will display a broken image. Instead, give them the src for a transparent 1x1 image, which can then be replaced.

<img src="blank.gif" name="imgTop" width="770" height="103" />

[Josh Campbell]

duh! how dumb of me. I should have thought of that. Thanks algorithm.