Display a Simple Loading Message and Animated Loading Gif Using JavaScript

Some pages require an inordinate amount of time to load.  For most sites, this is a big problem.  Webmasters and SEO specialists know the value of a quick landing page load, because they know that netizens have short attention spans.

Dynamically built webpages, (especially applications), require time to load and visual feedback that something is happening.  The most famous example is the gmail loading page:

Gmail uses a more sophisticated progress bar to represent the loading of the webpage.  I found an article on yensDesign that gives some great advice on how to do this, if you want to get really fancy.

If you have a dynamically built page that you’d like to give a loading message to that doesn’t require a full progress bar, I recommend simply displaying a message and an animated gif.

The Method

The trick to accomplishing this is a small mix of JavaScript and CSS.  You don’t have to be using <div>’s to display your content, but you should.  My example uses <div>’s.

Let’s begin by assuming you have the majority of your page’s content within a series of nested DIV’s, where the outermost DIV is called “container.”

 <div id="container">
    <div id="heading">
       ...heading content...
     </div>
     <div id="body">
       ...body content...
     </div>
  </div>

Normally, the dynamic content in your container would be rendered by the browser after it has downloaded and performed the main JavaScript routines.  What we want to do is hide the container when the page is first loaded and instead display a DIV that contains a waiting message and a little animated gif icon.

Begin by using the CSS display property to hide the container DIV like so:

  <div id="container" style="display:none">

Next, you need to add a new DIV that contains your “Please Wait, loading…” message.  I chose to include an animated gif icon of a twirling circle, which I easily created using the AjaxLoad.info, a site created by Catherine Roman.   If you want to download my animated loading gif, you can get it here.

Here is an additional set of nested DIV’s that contain the loading content.  This should be placed outside the container DIV:

      <div id='siteLoader'> 
        <div id='siteDetailLoader'> 
        <img src='/path/to/your/animated/gif/loading.gif' border='0'> 
        Please wait while the page loads...<br /> <br /> 
        </div> 
      </div> 

You’ll note that the display property is not set on siteLoader because it is visible by default.  This is what we want.  The trick now is to make the siteLoader DIV dissappear once the dynamic page content is done loading while simultaneously displaying the container DIV with the real page content.

This is handled using the global event handler onLoad.  There a few ways to make use of the onLoad event, I recommend including an external JavaScript file.  Do this by saving a new text file called actions.js in the same directory as the page you’re changing.  Just after your <title> tag on your document include this external JavaScript  file using:

<script src=”actions.js” type=”text/javascript”></script>

Inside actions.js, you need to include a function based on window.onload as follows:

window.onload = function() {
   document.getElementById("siteLoader").style.display = "none";
   document.getElementById("container").style.display = "block";
}

What this is doing is saying to the browser, “as soon as you’re done loading the webpage, you should hide the ‘please wait’ stuff and show the meat and potatos of my webpage.”

To view all of this in action, have a look at my recently updated online portfolio which of course, talks up what a great person I am. 🙂  I hope this has been helpful, as always–please post your comments!

For further reading on busy indicators and the important visual feedback and attention cueing needed to be successful with the display of heavy dynamic webpages, have a look at the article series on SAP Design Guild by Gerd Waloszek called “Waiting at the Computer: Busy Indicators and System Feedback.”   There is a wonderful table giving guidelines on the type of feedback that should be displayed based on user wait time.