How to preload your graphics for faster browsing

If you have multiple pages with many graphics (and other multimedia files), you can make browsing your site a smoother experience for your visitors by building a mini cache for your site. Of course, all major web browsers have their own caching system. However, all of them cache files after you see or hear them at least once, which of course does not give the optimum performance during the first visit to a page.

The trick is to pre-load most widely used images at your site. For example, your visitor is at your home page and the next pages have some images that are perhaps a bit big. You can use this Javascript to pre-load them:

<SCRIPT LANGUAGE="JavaScript1.1">
img1 = new Image
img1.src = "Image1.gif"
img2 = new Image
img2.src = "Graphic1.gif"
</SCRIPT>

Paste the above code into the first page (in this example your home page). Make sure you change the names "Image!.gif" and "Graphic1.gif" to the names of your real images.

Tips and Tricks