Pre-loading Images
Sometimes it's important to load in the images to a page before the main body of the page loads, so that they are
visible immediately with the rest of the content. Pre-loading images doesn't speed up the load time of the page of course,
but it can mean avoiding the ugly site of your page before it's fully dressed and ready to present itself to the world. Pre-loading is
also particularly important with image rollovers to make the effect smooth and convinving. See our Image Rollovers Script.
The Cache
Pre-loading uses a feature of browser technology known as the cache. The cache is the part of your computer where the
web page gets stored when you download it. Ever noticed that when you return to a web page it loads in far quicker than
the first time? That's because the files are still stored in your machine's cache and don't have to be downloaded again.
If you use Internet Explorer you can view your cache files in the 'Temporary Internet Files' folder on your main drive.
The idea of pre-loading images is to load them in to the cache before they're even needed.
This means that when they are called for they'll appear almost immediately.
Here's the script to load in the images. It uses a little simple javascript.
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from non JavaScript Browsers
Image1= new Image(50,60)
Image1.src = "/html/images/toad1.gif"
Image2 = new Image(70,80)
Image2.src = "/html/images/toad2.gif"
Image3 = new Image(90,100)
Image3.src = "/html/images/toad3.gif"
// End Hiding -->
</SCRIPT>
|
|
|
Here we've loaded in three images: toad1.gif, toad2.gif and toad3.gif.
The numbers in the brackets are the width and height, respectively, of each image
and the code Image1.src = "/html/images/toad1.gif" gives the source of the image.
Place the script near the top of your page, preferably in the HEAD tag.
This will ensure the images load before the main content of the page.
|
Useful Links
|
|
