title: Hide elements until the page finishes loading - using jquery
body: <p>I've just write a dead-simple code to hide all the elements until the page finishes loading and display an indicator while loading.. (<strong>It works</strong>). </p>
  
  <p>so what I'm asking for is to know if I'm doing it right and what are you going to suggest.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="loading"&gt;
          &lt;img src="indicator.gif"/&gt;
      &lt;/div&gt;
  
      &lt;div class="content"&gt;
          &lt;!-- page content goes here --&gt; 
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>$(document).ready(function(){
          $(".content").hide();
       });
  
      $(window).load(function(){
          $(".loading").fadeOut("slow");
          $(".content").fadeIn("slow");
       });
  </code></pre>