469,642 Members | 1,241 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,642 developers. It's quick & easy.

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
Dec 28 '06 #1
2 4754
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..
Dec 28 '06 #2
AricC
1,892 Expert 1GB
You can use javascript to preload an image.
Expand|Select|Wrap|Line Numbers
  1. var myImage = new Image;
  2. myImage.src = “images/myImage.jpg”;
  3.  
Dec 28 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by David | last post: by
2 posts views Thread by sean.f.duffy | last post: by
8 posts views Thread by Ross | last post: by
2 posts views Thread by bedges | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.