Loading ...
CSS Image Preloader
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
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:
1 2 3 4 5 6 7 8 9 10 11
<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.
1
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:
1 2 3 4 5 6 7
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.
1 2 3 4 5 6 7 8 9 10 11 12 13
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.
[...] Create an image pre-loader with CSS only [...]
Excelent solution to a common problem, and a great way around it.
Very nice, thanks for this.
love it.
Could you show me an exaple/website/ about it? Please…!
Thx!
this good sample!thanks alot..
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;
}
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.
I do not speak well in English. “Samplesite?” PLS!!!
Gilette, I understood. I will post some very soon.
Thanks a lot
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.
That way is a possibility as well.
Post updated with an example!
Thank you very much.
But… the pre-loader.gif does not appear unfortunately when I click the button
Sorry….. I misunderstood all.
I looked for it: http://www.webmasterworld.com/forum83/8261.htm
but only with css/no js/.
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! :]
Xevo, can you please show how to do that with a sample code?
Thanks
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.
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!
Hi Ian – Great you mentioned this. When updating to the new theme, I think something might have gone wrong! Thank you.
[...] wrote a tutorial about pre-loading images via CSS some time ago. This time we’ll use a slightly different approach. We will go deeper into the [...]
[...] http://www.divitodesign.com/2007/11/create-an-image-pre-loader-with-css-only/ [...]
Anyway to make those battleground images into a link when clicked on?
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.
[...] hover effect, but now the effect shows up when you click on an item. I also show you how to add a preloader to this [...]
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!
Thank you, but I still do not understand what is really good for?!
I agree the best way to do it is using div instead frames.
nice article
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.
Quick thanks for the code, saved me some work today.
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
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.
[...] CSS Image Preloader » DivitoDesign Pre-Load your Images using CSS. This fast solution adds a image pre-loader using the CSS language. [...]
Good tip, been looking for a script like this to preload our navigation menu
[...] View Tutorial [...]
[...] Source [...]
This is great, thx!
how can create a div pre loader with jquery ?
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
http://plugins.jquery.com/plugin-tags/preload
Something like this?
There is a whole generator of those things – http://cssload.net . They have both spinners and bars for loading in CSS
Great, thanks!
Thanks for the great tutorial man.