So, You Want To Pre-Load, Huh?
[A Few Downfalls]
[Pre-Loading HTML Pages]
That said, I bring you this tutorial on pre-loading images and HTML pages. This one was a bit of a struggle. Those with whom I spoke had never given this topic much thought. So I played around with it. Here's what I found.
Why Pre-Load Anything?Speed, man, speed! Fast, fast, fast!
Have you ever noticed that pages you've visited in the past always load faster than a page you're visiting for the first time? It seems like you only have to go through all of that item by item downloading once and from that point on, you're good to go.
Well, the reason that page, and all those images, came so fast the second time was that they had been "cached" (pronounced cashed). If you go into the guts of your computer by looking at the "Main" icon in Windows 3.x, or by following further and further into the folders of your MAC or W95 hard drive icon, you'll find the folders that house the Netscape Navigator or Internet Explorer program files.
If you delve deep enough into the "Netscape" folder, you'll see a sub-folder actually called "cache." It's a little harder to find the cache for Internet Explorer as it's located under the "Windows" folder and has the name "Temporary Internet Files." But whatever you call it, that folder represents a section of the hard drive set aside for the sole purpose of housing the HTML documents, images, and other types of files you view in your browser window.
The first time you entered into a page, that HTML document and the images it called for were all written to the cache for later use. The next time you enter into that page, the browser knows it can load the page and images off of its own hard drive rather than waiting for the server to offer the files. As you've seen, it's a much faster process. So, here's the thinking to pre-loading:
Why not cache all the images and pages a user will require to move through your site when they first arrive?
A Few Downfalls1. Caching pages is a great idea, but it can also be a problem if you update your files on a regular basis. Often the browser will display the page version it has in cache rather than the one you offer on the server. I make a point of clearing my browser history and cache often so that doesn't happen while I'm surfing. Others may do the same so your Pre-Loading fest may go unused.
2. You can try NOT to have your HTML pages cached but add this Meta command within your HEAD commands:
It works for Netscape-style browsers, but Internet Explorer ignores it and caches away.
3. Caching everything up front will certainly take longer than just downloading the current page images and such. You can try to get around that by only caching what will be needed for the next few pages rather than trying to throw everything down the Internet pipe at once.
Pre-Loading ImagesNow that the teacher in me has babbled on about the why, how, do and don't of pre-loading, we'll get into how it's done. Images are easiest. We'll do them first. Here's the basic format:
Image1= new Image(175,50)
Image1.src = "image1.gif"
Image2 = new Image(25,30)
Image2.src = "image2.gif"
Image3 = new Image(125,80)
Image3.src = "image3.gif"
// End Hiding -->
Let's take a look at the format:
- (175,50) is the width and then height of the image to be cached.
- image1.gif is the actual name of the image.
If your images are in subdirectories or are on other servers, then make a point of placing the entire path to the image where I only have the name so that the browser can find the image in order to cache it.
The quick answer is that you can pre-load HTML pages. I found a couple of ways to do it. But the fight to do it may not be worth the trouble.
Carry all the pages the user will need along with the main page. This is a lot of work in that you'll create one very large home page that contains all the other pages.
Notice it's an HTML document that will be written to a new window by multiple document.write statements. You'll need to denote every line of HTML code just as it is above.
You then call for the new window and page by adding this:
It's not overly difficult, but you do have to stay focused.
Would you like to see it in action? Follow this link to see a page with two others embedded. So, technically I have pre-loaded two pages. Take a look.
And That's That...So, go and try to pre-load a few images. Give the document pre-load a whirl. See what happens. You may just make it better for those who come around to see your pages.
[A Few Downfalls]
[Pre-Loading HTML Pages]