View Full Version : Image Preloading

Josh Campbell
01-18-2003, 09:01 PM
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:

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()
randomNum = Math.floor((Math.random() * imgCt));
document.imgTop.src = Top[randomNum];
document.imgBottom.src = Bottom[randomNum];

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

01-19-2003, 12:01 AM
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
01-19-2003, 03:53 AM
duh! how dumb of me. I should have thought of that. Thanks algorithm.