This is the second tutorial I've written, and concerns making a web browser preload images that might be needed on different pages. If you have large images that grace multiple pages, or a very important image/imagemap that's fairly large, it's a good idea to preload that image on another page for those people using dialup. That's where this tutorial comes in.

In some cases, you may need to preload images. In a previous incarnation of this website, for instance, I had a menu that used javascript to switch out the button graphics if you moused over them. However, without doing any preloading, you would have to mouse over the button, the image would download, and only then would you see the alternate button. For people on broadband, the download takes no time at all, so it's not noticeable. However, dialup users may have to wait a couple seconds, and a couple seconds is longer than most people will hover over a button before clicking it. Thus, for dialup users, a preload is necessary. At one point I also had a very large imagemap I used as the primary navigation, with more mouseovers to make that interesting. Without preloaders, even broadband users would have to wait.

There are several ways to preload images, but the most effective way is also the easiest. Simply include those images in your html with a height and width of 1 pixel apiece. This forces the browser to download the picture, but due to the size most people wouldn't notice them at all. As an example;

<img src="blah.jpg" style="height: 1px; width: 1px;">

And that's basically all that's to it. Just put a series of these, with your different images, at the bottom of your index page, or in your navigation frame or something. The browser takes care of the rest. Once those images are downloaded, another call for that image by your web page (at actual size) will cause the browser to pull it out of it's cache instead of redownloading it. For really large images, this is great even if you have a broadband internet connection, but primarily this technique is for dialup users.

What other ways are there to precache images, you ask? If you would like to get a bit more fancy, you can use javascript to preload your images like this.

<script type="text/javascript">
var image1 = new Image();
image1.src = "image1.gif";
var image2 = new Image();
image2.src = "image2.gif";
</script>

Simply put the above in the head of your web page (or inline if you're feeling brave). This will use javascript to dynamically create image elements and should force the browser to download the image. Since the image is never actually inserted into the document, it won't actually be displayed anywhere, but will be available in the browser cache.

These are the main ways in which you can preload images. If you have images that take a considerable amount of time to download, it's also possible to display a "loading" page until everything on the page is fully downloaded. However, in the world of short attention spans, this is usually just good for making people go somewhere else, so I would recommend against it.