Problem with jquery and ie and loading images

I have a web page that consists of three parts, script, style and body. the body is just tables of images - the problem is that when you first load the site all the images load one on top of the other - a real mess. The images should all be invisible and only appear when certain words are clicked - this is all done with javascript. Once all the images load they all disappear and then the site works the way it is supposed to. It is as开发者_如何学编程 if all the images are first read in visible and then the javascript kicks in and hides them since they were tagged with a div id that the javascript hides. I do not have this problem with safari 4.0.3 and mozilla - but I do have this problem with older versions of safari. Any way to prevent the images from initially being visible?

Instead of downloading the images and then hiding them, you can pre-cache the images and make them display only when required.

image1 = new Image();
image1.src = "..../../...jpg";
image2 = new Image();
image2.src = "..../../...jpg";
image2 = new Image();
image2.src = "..../../...jpg";

Then when you need the images, add them to the src

e.g.

<img id='img1'onMouseClick="this.src=image1.src" />

If you are using jQuery then better get some plugins for it.

By default, try to hide the images using CSS. CSS rules apply much sooner than JavaScript.
A common practice is to add a class to the body. For example, have the css:

body img {display:none;}
body.JSLoaded img {display:inline;}

The images will be hidden by default. When JavaScript loads, add the JSLoaded to the body, and the images will be shown.
This is also a good way to gracefully degrade your site for client without JavaScript.

A non-javascript way to preload images is just to put them inside of an inlined styled hidden div.

<div id="preload" style="height:1px;overflow:hidden;width:1px;padding:1px;">
  <img src="image1.jpg" alt="" />
  <img src="image2.jpg" alt="" />
  <img src="image3.jpg" alt="" />
</div>

This will load all your images and keep them in the cache for when you display them other places later.

I didn't do a display:none; because some browsers tend to not load images in dom elements that haven't been displayed. This should keep all the images out of view though.