title: Hiding everything until the page has finished loading
body: <p>I am looking to have everything on my page hidden until the page has finished loading. I have seen many posts and tried different things.
  The most common solution which works great is</p>
  
  <pre><code>&lt;body style="display:none;"&gt;
  </code></pre>
  
  <p>Then run jQuery to show it again upon window load</p>
  
  <pre><code>$(window).load(function() {
    $("body").fadeIn("slow");
  });
  </code></pre>
  
  <p>I have an issue with this, as the page is reliant on JS to show anything at all. I appreciate this is a rare thing, but just feels wrong.</p>
  
  <p>Ideally I would like to use jQuery to add the display:none css as well</p>
  
  <p>however...</p>
  
  <p>The problem is when I add </p>
  
  <pre><code>$(document).ready(function {
    $(body).css('display', 'none');
  });
  </code></pre>
  
  <p>Even this takes a while to run and the page flickers with content before hand.</p>
  
  <p>Is there a better way?</p>
  
  <p>Could I use the above script without document.ready (tried, but didn;t work)</p>
  
  <p>Thanks.</p>