Image sort order - little problem

[deiffert]

Hello,
I'm using javascript to change the sort order of 3 images. I want them to be in random order. However the method I am using right now loads the images, and THEN changes the order, so it does a little ugly refresh type thing.
Here's the code:

//create variables from the existing link URL's
var dlnk1 = document.getElementById("lnk1").href
var dlnk2 = document.getElementById("lnk2").href
var dlnk3 = document.getElementById("lnk3").href

//creat array that keeps the source of the images and the URL's of their links together during the random sorting
var group1 = new Array("../images/Front_Page_Ads/1.jpg",dlnk1);
var group2 = new Array("../images/Front_Page_Ads/2.jpg",dlnk2);
var group3 = new Array("../images/Front_Page_Ads/3.jpg",dlnk3);


//create varialbe to hold all of this
var img_name = new Array(group1,group2,group3);

//function for creating random sort order
function randOrd(){ return (Math.round(Math.random())-0.5); } 

//sort top layer of array for random order
img_name.sort( randOrd );

//change the source of the images
document.ImagePH1.src = img_name[0][0];
document.ImagePH2.src = img_name[1][0];
document.ImagePH3.src = img_name[2][0];

//change the URL of the link
document.getElementById("lnk1").href = img_name[0][1];  
document.getElementById("lnk2").href = img_name[1][1]; 
document.getElementById("lnk3").href = img_name[2][1];

This is placed AFTER the images are loaded in a straightforward manner within the HTML. Like this:

<a href="../whateverlinkhere.htm" id="lnk1"><img src="../images/Front_Page_Ads/1.jpg" name="ImagePH1" width="266" height="150" border="0" id="one2" /></a>

If I place the javascript code BEFORE this html, it obviously doesn't work. And if i remove the source reference from within the image tags, the images won't appear in non-javascript browsers (i know the images won't be sorted randomly, but at least they'll show up).

Let me know if you guys know of any way to do this without getting the ugly *sort images after they're loaded* thing.

thanks so much,
- david

[gil davis]

If you determine the random order in the head script, you can use document.write in the body to dynamically create your images with the right img src so you don't have to watch it swap.

Or, you could use a transparent image as the initial placeholder and swap it out for the real one onload. It is basically the same asction, except nobody will see it.