title: Show Spinning wheel image till the full page loads
body: <p>I am using the below code:</p>
  
  <p><strong>In Layout page inside body tag:</strong></p>
  
  <pre><code>&lt;div id="loading"&gt;
      &lt;img src="/images/user_profile/ajax-loading.gif" alt="Loading.." /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>In the start page:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        $(document).ready(function(){
        $(window).load(function(){
        $('#loading').fadeOut();
        });
        });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>div.loading{
  
     height: 100px;
     width: 100px;
     position: fixed;
     z-index: 1000;
     left: 50%;
     top: 50%;
     margin: -25px 0 0 -25px;
     display:block;
  }
  </code></pre>
  
  <p>The problem is that the spinning image is not coming immediately, it is taking sometime due to which blank page comes and the image is displayed just before the page loads.</p>
  
  <p>I want a solution in which the image should be displayed immediately and till the full page get loaded.</p>