load several images simultaneously

[Beverleyh]

I have a banner made up of several layered images - 2 jpegs on the base, 2 small animated gifs with transparent backgrounds overlaying portions of the base, and a static gif with transparancies overlaying another small portion of the base.

I have pieced together several smaller images in a jigsaw-like manner rather than layer them as equal sizes over each other for better optimisation.

The problem now it that they load in a scattered fashion.

So what I'm aasking is, is there a script that will stop these images displaying until the last one is loaded, then display them all at the same time?

ANy help would be great

Bev

[jscheuer1]

It would be easier to be specific if we had a link to your page. But in general, it really shouldn't be that big of a deal. Lots of web pages look fragmented until loaded. However, it can be done by setting the visibility of the images to hidden (best done by using a single container with visibility hidden for all of them), setting a counter to 0, whenever an image fires its onload event, increment the counter. When the counter reaches the number of images, switch the container's visibility to visible.

Care should be taken to have a non-javascript enabled fall back. In this case a noscript tag with the images in it as they currently are should do.

Since it's technically invalid to give an image tag a hard coded onload event, DOM level 2 should be used to create the markup for this.

I still think it is best to just live with it 'as is', though I haven't seen it yet. If it is a matter of the markup shifting around a lot, that can be eliminated simply by specifying the dimensions for the image tags.