So, You Want To Pre-Load, Huh?

By Joe Burns

Use these to jump around or read it all...
[Why Pre-Load Anything?]
[A Few Downfalls]
[Pre-Loading Images]
[Pre-Loading HTML Pages]

     When I get my brain wrapped around a topic for a tutorial, I usually do a great deal of researching around the Net, interviewing people I think might know the answer, and just generally playing around with trial and error. The primary purpose is to put together a good, all-encompassing tutorial. The secondary purpose is so I don't look like an idiot by writing something that's incorrect for the entire world to see.
     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?

     That way, the user will move through the remainder of your pages lickety-split. Great idea, huh?

A Few Downfalls

     1. 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:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

     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 Images

     Now 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:

<!-- hide from none JavaScript Browsers

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 -->

     The example above is pre-loading three images I have named image1.gif, image2.gif, and image3.gif. The format is not new to you if you've ever tried to install almost any Image Flip JavaScript. Most of them use this method to pre-load the image that will be "flipped-to".
     Let's take a look at the format:

  • Image1=new Image is JavaScript that names an image that is to be captured.
  • (175,50) is the width and then height of the image to be cached.
  • Image1.src= is JavaScript for the location (source) of the image to be cached.
  • image1.gif is the actual name of the image.

     The name of your images do not have to be image1.gif, etc., etc. You can use any names for the images. But the JavaScript "Image1=new Image" should follow the counting format I show above.
     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.
     This JavaScript can go anywhere on the document, but I would suggest getting it up high; in the HEAD commands is best.

     That's the trick. Just continue to follow this pattern again and again until you have cached (pre-loaded) all the images your users will require.

Pre-Loading HTML Pages

     Now we get into the hard part. When I tried to get answers to this portion, I received responses ranging from "Can't be done" to "Try JavaScript." My research on the Web wasn't any more helpful.

     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.
     The fastest method is to make each hypertext link a link to a JavaScript that will open a new window and display the text that appears within the script. I offer this method in both the New Window and the Remote Control tutorials. Here's the basic format:


function openindex()
      {"", "newwin");
OpenWindow.document.write("<TITLE>Title Goes Here</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=pink>")
OpenWindow.document.write("This text will appear in the window!")

     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:

onClick="openindex()" any hypertext link that is aimed at the main home page so the original window simply reloads rather than going to a new page. Then a new window will open that contains the HTML document outlined in the JavaScript. Whew!

     The real pain in the you-know-where comes in when you attempt to add multiple pages by following this method. Notice that the name of this item that is suppose to enact when the link is clicked is named "openindex()". See that in the onClick= statement above? That's called the function. You'll also find it at the very top of the JavaScript itself. See that above?

     To get a second page following this method, you will need to put in an entirely new JavaScript that contains an entire HTML page again, and change the name of the function to something other than openindex(). The easiest method is to just add a number to start counting up. Let's say you change it to openindex1(). Then when you set up the link that will open the page, you'll need to also change the onClick statement to open the openindex1() function rather than the original openindex() function.
     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.

     Now, in my searches I found a couple of other methods to pre-load HTML pages... maybe. The first method used JavaScript. I've looked at the code and I don't believe it does what it claims. It appears as if the page names are simply loaded into the browser's history file thus giving the appearance that the browser has been there previously (links turning from blue to purple). But I don't think it actually pre-loads the page into the cache.
     The second method offered is very close to what I am showing here, but is done with divisions rather than separate JavaScript-driven pages. But the concept is similar in that the main page will contain all the other pages that are to come. The real success of this method is that the pages do all load in the same browser window.

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.




[Why Pre-Load Anything?]
[A Few Downfalls]
[Pre-Loading Images]
[Pre-Loading HTML Pages]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date