title: Ajax Loader Gif not working in IE or Chrome
body: <p>I am new to ajax and trying to show a loading gif while the page is loading. It is working in Firefox, but will not display in Chrome or IE. I am assuming I am over looking something. I am using code I found in a Google search.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  body {
      margin: 0px;
  }
  
  #overlay {
  
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  &lt;!--
  
  var overlay = {
  
      click_on_overlay_hide: true,
  
      show_loading_image: true,
  
      loading_image: "http://www.leeparts.com/images/ajax-loader.gif",
  
      $: function(id){
          return document.getElementById(id);
      },
  
      init: function(){
          var ol_div = document.createElement("div");
  
          ol_div.id = "overlay";
          ol_div.style.display = "none";
          ol_div.onclick = (this.click_on_overlay_hide)? overlay.hide : null;
  
          if(this.show_loading_image){
              var l_img = document.createElement("img");
  
              l_img.src = this.loading_image;
              l_img.style.position = "absolute";
              l_img.style.top = (((window.innerHeight)? window.innerHeight : document.body.clientHeight) / 2) + "px";
              l_img.style.left = (((window.innerWidth)? window.innerWidth : document.body.clientWidth) / 2) + "px";
  
              ol_div.appendChild(l_img);
          }
  
          document.body.appendChild(ol_div);
      },
  
      show: function(){
          if(this.$("overlay")){
              this.$("overlay").style.display = "";
          }
      },
  
      hide: function(){
          if(overlay.$("overlay")){
              overlay.$("overlay").style.display = "none";
          }
      }
  
  }
  
  //--&gt;
  &lt;/script&gt;
  </code></pre>