473,326 Members | 2,108 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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 4899
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

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

Similar topics

4
by: David | last post by:
Hi everyone, I am trying to stop an image preload sequence by the click of a mouse but have been unsuccessful trying several methods. Imagine this simple script below that loads 50 images to...
2
by: sean.f.duffy | last post by:
Hi! I am an effectivebrand.com toolbar user and would love to add a preloader to my toolbar, but am having problems doing this. Is it possible to have javascript look at the URL of a webpage,...
8
by: Ross | last post by:
This page I am trying to create a preloader that hides all the other content except the hidepage div until it loads...any ideas? Or any preloaders that actually work? ...
3
by: abm | last post by:
Hi. I am in great need of a preloader for my Flash web site. I have looked at a lot of tutorials and examples, but I can not seem to get it to work. How do I add a preloader to my existing Flash...
2
by: bedges | last post by:
okay, the scenario: i have a header image which changes randomly across all pages in the site. that works fine. i also have an image preloader within the random header picker which theoretically...
1
by: 031179 | last post by:
Hi I'm having lots of problems trying to apply a preloader to the following site: http://www.publishingme.com/niaomh/index.html I have tried different websites and tutorials but no luck....
0
by: Lanky | last post by:
I have noticed on sites that on a page a preloader will run and one or more flash movies will appear. Then the preloader does not reappear on subsequest revists to that page during the same browser...
2
by: streammalvern | last post by:
Hi, I am having a problem with a published Flash Movie. I included a preloader and the whole file size of the .swf is only about 1MB. If I go to the movie, it pauses even before the preloader...
3
by: 1left | last post by:
Hi- I'm getting some weird flickering of objects (not the preloader elements) during the "Simulate Download" test (56k) of my Flash 8 movie. I'm on cable modem , and the preloader runs so fast at...
0
by: deluxmilkman | last post by:
I'm trying to play flv on frame 1 after both flv and contents on frame 2 are loaded. how can I stop flv from playing before the contents are loaded? AS on frame 1
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.