Path // www.yourhtmlsource.com → Images → PRE-LOADING IMAGES

Pre-Loading Images

by Ross Shannon

Pre-loading images (and in some cases HTML files) speeds up their display by using your browser's cache. This means quick loading when the files are required.

Clock This page was last updated on 2012-08-21


The Cache

If you're not familiar with the idea of a cache, allow me to explain. Every webpage and its contents you view gets saved in a special part of your hard disk called a cache (pronounced cash). The next time you visit that page the images are taken from the cache instead of being downloaded again. This means they appear faster and make way for new things that may have to be downloaded for the first time. You may have had a run through your 'Temporary Internet Files' folder in Windows — that's Internet Explorer's cache. Netscape keeps its cache in its program folder.

So, on your first visit you have to download a load of stuff, but on every visit thereafter you're just pulling stuff up from the cache. This is also how it's possible to read websites offline; they're just being read off your hard drive.

The idea of pre-loading images is to load them and put them in the cache before they're even needed. This means that when they are called for they'll appear almost immediately. This property is most important with things like navigation graphics and image rollovers. You can guess what images your reader might need and load them in advance, in the background so they'll never see it happen.

The Script

So, let's get the script. This is done in JavaScript, by the way.

<script type="text/javascript">
<!-- hide from non JavaScript Browsers

Image1= new Image(150,20)
Image1.src = "pic1.gif"

Image2 = new Image(10,30)
Image2.src = "pic2.gif"

Image3 = new Image(72,125)
Image3.src = "pic3.gif"

// End Hiding -->
</script>

That script would pre-load images 1 to 3. If you've used image flips before you can see that that code has a pre-load built into it. If you've never seen one of these run before, here's what it all means:

  • Image1= new Image is the first step of setting up a new script effect for an image
  • (150,20) are the width and height, respectively, of this image
  • Image1.src = "pic1.gif" gives the source of the image.

Place the script near the top of your page, in the head if you want. This will ensure it runs early as the page loads.

Pre-loading HTML

If you're looking to pre-load HTML files, I'd have to tell you that the JavaScript methods in use are not great. You can see them in » this tutorial. In any case, the concept of pre-loading a whole page seems a bit strange — why have a large extra download on a page when the reader may not need it? If you must pre-load a page, the method I would use is to open a 1x1 iframe on your page with the next page inside it. Clever.