Here is a small tutorial on how to preload images using valid CSS. Usually, you could use JavaScript to preload images, but many browsers turn JavaScript off due to security concerns. However, CSS can just as easily do the job, although not as straightforward as JavaScript.
Usage
For this tutorial, we’ll use these two images of the fabulous Lamborghini Murciélago:
We’ll be setting up a simple image rollover for a link. Our purpose of preloading the image is because some browsers (especially IE) doesn’t download the image that shows up when you hover over a image link. So there is usually a blink when you move your cursor over a rollover because the developer did not specify the browser to preload the image. Although Firefox generally doesn’t have this problem, since a substantial portion of web users use Internet Explorer, its worth to use this method. So, let’s start.
Step 1: First, we’ll create an HTML file which we’ll use for the images. Create a page preload.html.
Step 2: Now, download the two images above (or use two of your own images) and for our purposes name them lamborghini1.jpg and lamborghini2.jpg. Also, let’s just put them in the same directory as our preload.html.
Step 3: Now, let’s fill in preload.html. We’ll put lamborghini1.jpg in the page and link it to Lamborhini’s official website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lamborghini Murciélago Picture</title>
</head>
<body>
<div>
<a href="http://www.lamborghini.com/" title="Lamborghini Official Site"><img
src="lamborghini1.jpg" alt="Lamborghini Murciélago" width="400" height="300"
border="0" /></a>
</div>
</body>
</html>
Step 4: Now, we’re going to add the rollover effect for the link. First, let’s edit the HTML file. So, change
<img src="lamborghini1.jpg" alt="Lamborghini Murciélago" width="400" height="300" border="0" />
to
<img id=”hover” src=”lamborghini1.jpg” alt=”Lamborghini Murciélago” width=”400″ height=”300″ border=”0″ onmouseover=”hover.src=’lamborghini2.jpg’” onmouseout=”hover.src=’lamborghini1.jpg’” />
The rollover should work (we used Javascript to do this), but now we’re going to use CSS to preload the rollover image so that some browsers won’t “blink” while loading the image.
Step 5: Add the following right before the closing </body> tag.
<div class="preload"><img src="lamborghini2.jpg" alt="Preload image" /></div>
Step 4: Let’s create a CSS file called style.css and add the following lines to the new stylesheet.
@charset "utf-8";
div.preload {
position:absolute;
top:-9999;
left:-9999;
height:1px;
width:1px;
overflow:hidden;
}
Step 5: Now, for our final step, let’s just link the stylesheet to the HTML file. Add the following line to the head of the HTML file.
<link rel="stylesheet" href="style.css" />
There, we’re done! Although it’s a simple process, I just simplified the steps in case anyone needs the explanation.
Example
Here’s an example of what I’ve been explaining above:
Why does it work?
The idea behind preloading with CSS is pretty simple. Basically, we actually put the images we want to preload into the HTML but with CSS we resize it to 1×1 and move it out of the way (by positioning the absolute div container to -9999, -9999). So, when the user eventually sees the image, the browser would already have it saved in its cache.