A CSS Preloader

[toxicpaint]

Hi there!
I'm trying to pre-load my images before the page loads. I'm currently trying a method that doesn't seem to be working. I think it's because CSS compliancy states that only the first instance of a CSS attribute is treated as valid, any following occurrances are ignored. (correct me if I'm wrong!).

If you click the link at the bottom, you'll see why I'm trying to do this.

This is what I'm currently doing:

#preloader
{
width: 0px;
height: 0px;
display: none;
background-image: url(images/back.jpg);
background-image: url(images/header.gif);
background-image: url(images/header1.gif);
background-image: url(images/header2.gif);
background-image: url(images/header3.gif);
background-image: url(images/header4.gif);
background-image: url(images/header5.gif);
background-image: url(images/header6.gif);
background-image: url(images/searchbar.jpg);
background-image: url(images/searchbar2.jpg) ;
background-image: url(images/searchbar3.jpg) ;
background-image: url(images/searchbar4.jpg) ;
background-image: url(images/searchbar5.jpg) ;
background-image: url(images/searchbar6.jpg) ;
background-image: url(images/topmenu.jpg);
background-image: url(images/topmenu2.jpg);
background-image: url(images/topmenu3.jpg);
background-image: url(images/topmenu4.jpg);
background-image: url(images/topmenu5.jpg);
background-image: url(images/topmenu6.jpg);
}

Then calling the div at the end of the page in my html

Link: http://www.macabre.org .uk/global/site4

Can anyone help?

Cheers

[toxicpaint]

This seems to work. So I'm using it for now.

I just pop this in the html code at the bottom.

<div style="display: none">
Your browser does not support CSS.

If images appear below, please disregard them.
<hr />
<img src="images/back.jpg" alt="" />
<img src="images/header.gif" alt="" />
<img src="images/header1.gif" alt="" />
<img src="images/header2.gif" alt="" />
<img src="images/header3.gif" alt="" />
<img src="images/header4.gif" alt="" />
<img src="images/header5.gif" alt="" />

<img src="images/header6.gif" alt="" />
<img src="images/searchbar.jpg" alt="" />
<img src="images/searchbar2.jpg" alt="" />
<img src="images/searchbar3.jpg" alt="" />
<img src="images/searchbar4.jpg" alt="" />
<img src="images/searchbar5.jpg" alt="" />
<img src="images/searchbar6.jpg" alt="" />
<img src="images/topmenu.jpg" alt="" />
<img src="images/topmenu2.jpg" alt="" />

<img src="images/topmenu3.jpg" alt="" />
<img src="images/topmenu4.jpg" alt="" />
<img src="images/topmenu5.jpg" alt="" />
<img src="images/topmenu6.jpg" alt="" />
</div>

If anyone has any other suggestions, I'd love to hear them..

[AricC]

You can use javascript to preload an image.

var myImage = new Image;
myImage.src = “images/myImage.jpg”;