Show Loading Image While Page Loads - Part III

Previously, we discussed two methods on preloading web pages. You can either switch the display between "divLoading" and "divContent" <div> controls, or use the javascript getHTTPObject. If that makes no sense, then you can read Part I and Part II respectively.

This method does not have the the limitation of the first two. What is the solution? Inline frames. Implementing is similar to Part I.

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>

Now, create your <iframe> control.

<iframe src="content.aspx" frameborder="0" id="iContent" onload="hideLoading()" />

Your javascript code.

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

Remember the innovating thinking from part one? It applies here as well. Experiment to determine the best method for your needs. You can even mix the method from Part II to update the source of the inline frame, but keep in mind the cross scripting limitation. Alternatively, you can update the SRC attribute rather that simply hiding the <div> control.

In my experience, using inline frames were difficult to work with. Aligning, positioning and displaying were tricky but once I got the hang of it, it wasn't to bad. I was able to use AJAX controls, and kept my code modular. Maintenance was simplified in that I don't have to touch the core backbone.

Feel free to post your ideas on preloading web pages. The end.