problem with jquery and ie and loading images

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.