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.
精彩评论