Question:
I know you can preload an image into the browser's cache, but can you preload an entire HTML page (images included)?? This would be useful when a user has a lot to read a page and you know the next page they are going to access. You can use this time a inactivity to preload the next page into cache and thus improve overall performance.
The current version of JavaScript does not provide direct support for preloading documents. However, because JavaScript allows you to spawn browser windows and control their content, there are a few tricks you can use to achieve the desired effect.
preload_document () functionA preloading technique I have used with success works as follows:
I have developed a function, called "preload_document ()," which is useful for implementing this technique. To make it easy for you to cut and paste, I have included it in an editable textbox below. My recommendation to you is that you save the function in a .js file, such as "preload.js," and then reference it externally from each document that uses it.
Obviously, documents which preload other documents need to call the preload_document () function. Less obvious, however, is the fact that any documents which are preloaded must also call the preload_document () function. In both cases, the preload_document () function should only be called from within the <body> tag's onLoad event handler, as follows:
<body onLoad="preload_next_document ('nextdoc.html');">
For the current document, this guarantees that network bandwidth will not be expended on the next document until the current document is completely loaded. For the next document, this guarantees that the preloader window will not close until after the entire document has been preloaded. (Note: Set the next_doc parameter to null in documents that get preloaded but don't need to preload other documents.)
When the current document finishes loading, it executes the "(current document)" branch of the function, which opens a very small, postage stamp-sized window to load the next document. However, when the new window is created, it appears above the current window, where it can potentially distract the user. Thus, the main window must also call its focus () method in order to raise itself above the preloader window. This makes it possible for the preloader window to "work behind the scene."
When the document in the preloader window finishes loading, its own onLoad event fires, causing the "(next document)" branch of preload_document () to be executed. This closes the preloader window -- but that's OK, since the document it loaded is now stored in the cache.
When the user goes for the next document, it will appear to load instantly, because it is already in the cache.
Feel free to use preload_document () in your own web pages. It's not much, but it will have to do until Netscape provides build-in JavaScript functions to accomplish the same thing.
Note for advanced JavaScripters: The technique described in this article is not necessarily the best technique, but it is simple to use and easy to understand. If you want something even more elegant -- perhaps a technique that doesn't require modification of the document that is going to be preloaded -- try experimenting with frames and window timeouts.
Charlton Rose
May 3, 1997