title: Loading gif taking too long to load
body: <p>I have a website with a lot of heavy front-end features on it, and am making use of a loading gif to ease my loading troubles.  I have noticed however, that in Safari particularly (probably since it's a generally slower browser) the background of the loading gif loads and then almost eight seconds later, the gif loads, at which point the rest of the page is done loading and the site appears.  This seems like kind of waste of the entire effect.</p>
  
  <p>Is there any way to get this gif to load earlier so that the gif plays BEFORE the rest of the page is loaded?</p>
  
  <p>Here my website:  <a href="http://bmgz.rtcgraphics.com/" rel="nofollow">http://bmgz.rtcgraphics.com/</a></p>
  
  <p>Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html class="js"&gt;
      &lt;body&gt;
          &lt;div id="preloader-gif"&gt;&lt;/div&gt;
          &lt;!-- the rest of the website --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.js div#preloader-gif {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      width: 100%;
      height: 100%;
      overflow: visible;
      background: #333 url(img/ajax-loader.gif) no-repeat center center;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
      $(window).load(function(){
          $('#preloader-gif').fadeOut('slow',function(){$(this).remove();});
      });
  });
  </code></pre>