CSS Image Preloader
Author: Stefan Vervoort | Please Comment!In this article, you’ll learn how to create an image pre-loader without Javascript. CSS is the technique we are going to use. No fancy and hard to understand codes, but the smart use of codes you already know about.
Why use an image pre-loader? A lot of websites out there use CSS to display their navigation menu. In most of these menu’s, images are used. When you roll with your mouse over one of the menu items, the ‘hover’ image is displayed.
Sometimes, it takes a fraction of a second to load this ‘hover’ image. Your browser doesn’t load ‘hover’ images when the whole page loads, and therefore it has to load when the visitor asks for it. As the designer of that page you would like to display that ‘hover’ image right away. This is where the pre-loader comes in, which is an smart help in such situation.
Let’s start. In this article we’ll make sure ‘hover’ images are loaded together with the page. These are the codes we will start with.
CSS
ul{ margin: 0; padding: 0; list-style-type: none; font: 13px 'Lucida Grande', Arial, sans-serif; } ul li{ display: inline; } ul li a{ display:block; width:120px; text-decoration: none; padding: 0.3em 1em; color: #000; background:url(images/link.gif); } ul li a:hover{ width:120px; background:url(images/hover.gif); }
My HTML codes looks like this:
<ul> <li><a href="http://www.divitodesign.com">Homepage</a></li> <li><a href="http://www.divitodesign.com">Articles</a></li> <li><a href="http://www.divitodesign.com">Weblog</a></li> <li><a href="http://www.divitodesign.com">Contact</a></li> </ul>
We are going to add a pre-loader. Open up your HTML file and add the following codes just above your tag.
Inside this div, we are going to add images you would like to pre-load. Those images won’t be displayed when the webpage just loads, only when rolling over the menu item.
Now, open up your CSS file. Add the following codes:
div.loader{ background:url(images/hover.gif); margin-left:-1000px; }
These codes will tell the div with class loader it should be displayed 1000px to the left. Yes, outside your browser. Your visitors won’t notice this box, but your browser knows the box is there and will load the image(s).
If you would like to add more images to the div, just add more ‘background’ tags and you are done.
div.loader{ background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; background:url(images/hover4.gif) no-repeat; margin-left:-1000px; }
Now you could pre-load images without using Javascript! Good luck with using this on your website and thanks for reading.
Example
Some people have asked for an example so here it is; CSS preloader example.
Loading ...
Loading...
5:14 am on November 26th, 2007
Excelent solution to a common problem, and a great way around it.
Very nice, thanks for this.
12:26 am on November 29th, 2007
love it.
2:02 pm on December 19th, 2007
Could you show me an exaple/website/ about it? Please…!
Thx!
12:03 am on December 22nd, 2007
this good sample!thanks alot..
4:57 pm on December 23rd, 2007
Well im not with you on the css part.
My way is:
div .loader{
background-image:url(images/hover.gif);
background-image:url(images/hover2.gif);
background-image:url(images/hover3.gif);
background-image:url(images/hover4.gif);
display:none;
}
5:15 pm on December 23rd, 2007
There are two ways to do the trick. I decided to go this way, but the way you provided is a good one as well. When you try it out, you’ll notice it works both ways. Thanks for your comment.
1:22 pm on December 25th, 2007
I do not speak well in English. “Samplesite?” PLS!!!
6:54 pm on December 25th, 2007
Gilette, I understood. I will post some very soon.
7:35 am on December 26th, 2007
Thanks a lot
3:13 am on January 2nd, 2008
Even faster:
ul li a{
width:169px;
text-decoration: none;
padding: 0.3em 1em;
color: #000;
background:url(images/hover.gif);
background:url(images/link.gif);
}
your browser will load the hover.gif, but it will display the link.gif. As that part is the last background property the css reads.
6:51 am on January 2nd, 2008
That way is a possibility as well.
Post updated with an example!
9:46 am on January 2nd, 2008
Thank you very much.
But… the pre-loader.gif does not appear unfortunately when I click the button
10:44 am on January 2nd, 2008
Sorry….. I misunderstood all.
I looked for it: http://www.webmasterworld.com/forum83/8261.htm
but only with css/no js/.
8:06 am on January 3rd, 2008
It would be better just 2 use one image for the links. Than just replace the image with image position when you hover and bingo! :]
12:33 am on January 28th, 2008
Xevo, can you please show how to do that with a sample code?
Thanks
11:02 am on February 2nd, 2008
If you wanna do what Xevo mentioned here’s the code:
#navi ul li a
{
background: url(images/navi.gif) 0px 0px repeat-x;
}
#navi ul li a:hover
{
background-position: 0 -41px;
}
In this example the navigation links are 41px in height and navi.gif is 1px by 82px. The 1st 41px of the image are for the link background normally and the second 41px are for the link background when the user hovers over the link.
The navigation link is obviously not 1px in width so i use ‘repeat-x’ so the image repeats across the whole link background.
Anyway the main details are 1) ‘0px 0px’ and 2) ‘0px -41px’. These specify the image (navi.gif) relative to the link. Essentially 1) means the normal link image is shown and 2) moves the image up to show the hover image and hide the normal image.
12:07 pm on April 4th, 2008
hey wheres the code for this one?
“We are going to add a pre-loader. Open up your HTML file and add the following codes just above your tag.”
cant seem to see the codes.
thanks man!
11:00 am on April 5th, 2008
Hi Ian - Great you mentioned this. When updating to the new theme, I think something might have gone wrong! Thank you.
7:54 pm on June 2nd, 2008
Anyway to make those battleground images into a link when clicked on?
8:10 am on June 3rd, 2008
Yes, there is a way to do that. I haven’t really looked into that, but I’ll post a tutorial about this soon, I guess.
11:03 am on September 24th, 2008
Being a coder since 2000 i can tell you that the preloader images should have each it’s own class… That’s just because the browsers keep upgrading all the time and the cascading bug/hack may not work in the nearest future.. Great idea though!
2:19 pm on October 1st, 2008
Thank you, but I still do not understand what is really good for?!
10:12 am on October 3rd, 2008
I agree the best way to do it is using div instead frames.
9:52 pm on October 15th, 2008
nice article
1:42 am on October 22nd, 2008
There’s no need for an extra div. You can just assign this to any current element on the page i.e
html
{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
background:url(images/hover4.gif) no-repeat;
}
Assuming you overwrite this later in your css file with another background image.
4:27 pm on November 5th, 2008
Quick thanks for the code, saved me some work today.
7:42 pm on November 24th, 2008
hey very nice trick friend i loved it . Will be very helpful yar. And i liked you your css you are using to write codes in posts . can you share it
11:55 am on December 30th, 2008
You sure this will work better with Ajax based websites. I have worked with .net, and used its built in image loader tool under Ajax tool bar. This however seems to be a good replacement especially for PhP web sites. Thanks for the reference site.