title: Display div while page loads (all JS and HTML/CSS)
body: <p>I have a load of images being pulled from Wordpress attachments and then dumped on the page using a masonry grid of sorts - all good. However, it takes a little long.</p>
  
  <p>Is there any way to display a div, with some text, as the page is loading, and then display: none, after?</p>
  
  <p>I have this so far:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function showContent(){
  //hide loading status...
  document.getElementById("loading-grid-page").style.display='none';
  
  //show content
  document.getElementById("content").style.display='block';
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="showContent()"&gt;
  &lt;script type="text/javascript"&gt;
  document.write('&lt;div id="loading-grid-page"&gt;Fetching ALL the gold...&lt;/div&gt;');
  &lt;/script&gt;
  &lt;div id="content"&gt;
  &lt;script type="text/javascript"&gt;
  //hide content
  document.getElementById("content").style.display='none';
  &lt;/script&gt;
  </code></pre>
  
  <p>and my CSS,</p>
  
  <pre><code>#loading-grid-page {
  color: #ffffff;
  font: 700 11px/25px 'proxima-nova-1', 'proxima-nova-2', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #111111 url('images/ajax-loader-black.gif') no-repeat 15px center;
  border-radius: 2px;
  border: 1px solid #111111;
  padding: 5px 30px;
  text-align: center;
  width: 200px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -100px;
  z-index: 1000000;
  }
  </code></pre>
  
  <p>However it throws back mixed results, sometimes it waits and all the masonry works, and sometimes it doesn't and the masonry fails and the page loads strangely.</p>
  
  <p>Just wondered if there was anything else out there ;)</p>
  
  <p>Thanks,
  R</p>