title: show loading image while the page is loading
body: <p>I want to show a <code>Loading</code> image when the page is not loaded yet. Before loading the page it shows a <code>blank white page</code> to the user. So, i want to remove the white blank space.</p>
  
  <p>The page makes too many database hits, so it loads a bit slowly.</p>
  
  <p>I've checked <a href="https://stackoverflow.com/questions/3535020/show-image-while-page-is-loading">this</a> post, but that doesn't work.</p>
  
  <p>I've checked by adding <code>&lt;![CDATA[</code> infront of the script, as it stated in the <a href="http://www.dzyngiri.com/show-loading-image-while-the-website-loads/#comment-14925" rel="nofollow noreferrer">blogpost</a>.
  That doesn't work.</p>
  
  <p>Finally i've landed in Asking a Question, though it is a duplicate.</p>
  
  <p>Here is my script finally.</p>
  
  <pre><code>&lt;script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      // &lt;![CDATA[
          $(window).load(function () {
              $("#divLoading").fadeOut("slow");
          });
      // ]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and in the body</p>
  
  <pre><code>&lt;body style="background-color: white;"&gt;
      &lt;div id='divLoading'&gt;
          &lt;div class="loading" align="center" id="divImageLoader"&gt;
              &lt;img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/&gt;  Loading 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The CSS of loading is:</p>
  
  <pre><code>.loading
  {
      font-family: Arial;
      font-size: 10pt;
      padding:20px;
      position: fixed;
      background-color: #ffffff;
      z-index: 99999;
      border-radius:5px;
  
  }
  </code></pre>
  
  <p>What was wrong with my code ? Can someone point out or give working solution.</p>
  
  <p>Cheers !!!</p>
  
  <p>Karthik</p>