dynamic <img> src

[Kurt Behn]

I have a <select> on my page that presents the user with a list of
images, from which they can choose to view one image at a time.
I'm using the following bit(s) of javascript to achieve this by
changing the src on the <img> and resizing the image. It is working
fairly well, but I cannot get it to consistently show the first image
when the page is loaded, unless it is already in the cache.

The following is part of the code I use to change images and also to
load the image originally:

<snippet>
// i use an Image and the <img> to modulate the size of the
// image and maintain the aspect ratio as you can see

var img = new Image();
var img2 = document.theimage;
img.src = imageSource;
img2.src = imageSource;
if (img.width > 350)
{
img2.width = 350;
img2.height = img.height * (350 / img.width);
}
else
{
// just to be sure
img2.width = img.width;
img2.height = img.height;
}
</snippet>

I also do this in the body onload event to preload all the images in
my <select>:

<snippet>
for (var i = 0; i < imageSelect.options.length; i++)
{
var img = new Image();
img.src = imageSelect.options.value;
}
</snippet>


The most pronounced problem is the first image not showing up and
needing to move to another image and back to get it to display.
However, sometimes it even has issues with loading the 2nd or 3rd
image. Is there something else I could do ensure the images show up
when asked?

Thanks
k