Preloading images with JavaScript

This document demonstrates the use of JavaScript to preload images for another page. While you read this, your browser has been sending requests for the images, and they should be in your cache by now. This is a useful technique for speeding up access to sets of related Web pages. It can also have some unexpected side effects, which will be explained on the next page.

To see the images, try the page ImgPreload1.html.

If you have access to the server, you will want to check out its access log. The server's log should show GET requests for some GIF files, though you don't see the images here. If you reload this page, the server's log should show the GET for this page, but not for the image files, because they are already loaded and should be in your browser's cache.

Feel free to copy this demo for your own uses. You will want to replace the images with your own, of course. The second page is probably of little value to you, so copy it only if you want your own version of this entire demo.