How to Create an Image Pre-loader Without Javascript?

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *