title: The page loading animation for hiding whole page load process ends long before It must fade out
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/7577413/hiding-page-loading">Hiding page loading</a>  </p>
  </blockquote>
  
  
  
  <p>I'm using loading animation for hiding whole page load process. but it ends long before It must fade out. it ends while loading but must fade out after full page load </p>
  
  <p>Here is the js</p>
  
  <pre><code>$(document).ready(function(){
  
      $('#loading').fadeOut(600, function() 
      {
          $("#wrap").fadeIn(1000);
          $("#footer").fadeIn(1000);
      });
  });
  </code></pre>
  
  <p>HTML markup</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div id="loading"&gt;&lt;img src="core/design/img/load/load.gif" /&gt;&lt;/div&gt;
  &lt;div id="wrap"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm trying to hide whole page loading process with following solution.</p>
  
  <p>CSS Rules:</p>
  
  <pre><code>#loading {
      position:fixed; 
      left:0; 
      top:0; 
      width:100%; 
      height:100%;
      background-image:url("img/load/tr.png"); 
      z-index:100;
  }
  #loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%} 
  </code></pre>
  
  <p><a href="http://www.aquastyle.az?lang=en" rel="nofollow noreferrer">You can see it in action</a> </p>