title: Page loading div display once per session and fade out when page is loaded
body: <p>I'm trying to setup a 'Page loading' div that displays fullscreen while the page is loading in, then fades out when the document is ready.</p>
  
  <p>I have this working fine like so...</p>
  
  <pre><code>/*HTML*/
  &lt;div id="splash"&gt;Content&lt;/div&gt;
  
  /*CSS*/
  #splash {
      background: url("http://localhost/images/loader.gif") no-repeat scroll center center #fff;
      position: absolute;
      z-index:100000000;
      height: 100%;
      width: 100%;
  }
  
  /*jQUERY*/
  
  &lt;script type="text/javascript"&gt;
  $(window).load(function(){
      $('#splash').fadeOut(800);
      $('body').css('overflow','auto');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The above setup essentially displays an animated graphic over the top of my loading site and then it fades out when the site has fully loaded. No issues here.</p>
  
  <p><strong><em>WHAT I NEED</em></strong>
  I'd like the div to only show once per session (to avoid it showing when navigating back to the homepage from any other page on the site)</p>
  
  <p>I wouldn't mind using a cookie or the html5 localstorage method.. I've just struggled for hours to try and piece together existing code and failed because my understanding of jQuery is rubbish.</p>
  
  <p>Much appreciated</p>