Pre-Loading Images

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 1×1 iframe on your page with the next page inside it. Clever.

Online Script Generator for Preloading Images

right here: http://javascript.internet.com/generators/preload-images.html

Preload - Rollover Script Generator. Fill in the empty form fields, three for each preload/rollover effect you wish to use. The first field is for the initial image which will be shown on your page. You can use a relative URL for the image, such as alien1.gif, or you can use the full URL, like http://webdeveloper.com/javascript/alien1.gif. The second field is where you’ll place the URL for the rollover image–the one that will be pre-loaded. Again, you can use a relative or a full URL. The third blank is where you’ll place the URL for the hyperlink itself, such as http://www.webdeveloper.com. Continue in this fashion until you have listed all the images you wish to use as mouseovers (you can create five pre-loads/mouseovers using the generator), and then click the button on the bottom of the page.