John Mendez

In my research on how to best preload a web page, I came across multiple ways of accomplishing this goal. Fortunately, I was able to try at least 3 different methods and will outline them in a three part series.

The first method is the easiest to implement. However, it may not work well with server side pages. It is very simple and straight forward to use, and with some innovative thinking, can become fairly robust.

Create your "loading" <div> control. In this control, you place a message or image you want users to see while your page preloads. Note the styling applied to the control.

<div id="divLoading" style="position:absolute, width:100%; height:100%; background-color:white;">
  <img src="imgLoading.gif" alt="Loading Page" /><br>
  LOADING PAGE...
</div>

The control will be the first thing loaded and shown to the user. Basically, it will hide the rest of the page while it continues to load. Now, add your "content" <div> control. This will contain the rest of your page.

<div id="divContent" style="display:hidden">
  The rest of your page's content.
</div>

This method will work great when you need to load large amounts of images. But, if you have a page with many pictures and they are all statically declared, then either you have too much time on your hands, or you need to pick up PHP or ASP.

Now, the javascript.

<script type="javascript">
  function showContent()
  {
    document.getElementbyId("divLoading").style.display="none";
    document.getElementbyId("divContent").style.display="visible";
  }
</script>

This is where your innovating thinking comes into play. You can use a timer to trigger the showContent() function, but not recommended since some computers are slower than others. The onload event of your images/controls can be used to trigger the change as well. Or, you can use the windows.onload() function. Alternatively, you can have your content defined in a javascript function which upon completion will trigger showContent() to display it.

Below is an example using the image onload event.

<img src="bigPicture" alt="the Big One" onload="showContent()" />

While this works fairly well, and is commonly used, it really lacks the support of server pages. For example, if you are loading dynamic textual content, it will be almost instantaneous to display. Thus, your "loading" <div> control will barely be visible because the OnLoad event will be triggered so fast. Unless you use a timer or you have tons of media content, this method is not a good choice.

To be continued.

Javascript javascript