Show Loading Image While Page Loads - Part II

This method supports server pages somewhat. Its a little harder to implement and requires more knowledge in javascript if you have to debug your code. I prefer this method, and when possible, use it often.

Define your "Content" <div> control.

<div id="divContent">
  <img src="imgLoading.gif" alt="Loading Page" /><br />
  LOADING PAGE...
</div>

Notice, this control is not positioned absolutely, nor do we have a "Loading" <div> control. That's because we will replace the contents of the control dynamically using javascript. Here is the code.

<script language="Javascript" type="text/javascript">
  var request;
  window.onload = function() {
    request = getHTTPObject();
    request.onreadystatechange = sendData;
    request.open("POST", "content.aspx", true);
    request.send(''); }
  function sendData() {
    if (request.readyState == 4) {
      showData(); } }
  function showData() {
    var div = document.getElementById("divContent");
    div.innerHTML = request.responseText; }
  function getHTTPObject() {
    var xhr = false;         
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest(); }
    else if (window.ActiveXObject) {
      try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP"); }
      catch(e) {
        try {
          xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
        catch(e) {
          xhr = false; } } }
    return xhr; }
</script>

Now you can have a server page (content.aspx) that contains textual or media data. As long as the javascript is trying to read the page, your loading content will be displayed. Unfortunately, there are serious drawbacks to this method.

This is considered cross scripting. You may be denied unless you call local static pages, have appropiate permissions, or use Internet Explorer. (Note: IE can deny you if permission levels are increased) This method is ideal for intranet environments where you control all your permissions. Another issue, if you use AJAX Controls or Javascript, your page may get confused and not function properly. So, is there another way without the limitations of the first 2 methods? Yes.

To be concluded.