DivitoDesign

Everything for the Web Professional

CSS Image Preloader

November 12, 2007 43 Comments →

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.

Information about the Author:

Name:

URL: http://twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

More on: CSS

43 Comments

  1. coorseatave says:
    December 1, 2011 at 9:18 pm

    This really is my personal very first post and also the very first time I have spoken about my worries as well as feelings publicly

    Reply
« Older Comments

Please Respond and Give your Opinion

We use Gravatar to handle our avatars. Get one there!