title: Large CSS background-image blocks Javascript while loading
body: <p>From everything I've been able to find a large CSS <code>background-image</code> shouldn't block javascript from executing. Unfortunately, on both Firefox and Chrome this does seem to be the case.</p>
  
  <p>If I do a hard refresh on Chrome I can see the background slowly load (on a slow connection) and then once it's finished my JavaScript executes, displaying the rest of the page's content.</p>
  
  <p>I'm using jQuery's <code>$(document).ready</code> and Facebook's <code>window.fbAsyncInit</code> methods to run the JavaScript when the DOM and Facebook SDK are ready.</p>
  
  <p>I'm not sure if it's relevant but the background is set in CSS with:</p>
  
  <pre><code>body {
      background: black url(...) no-repeat top center fixed;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: 50% 50%;
  }
  </code></pre>
  
  <p>I am already using CSS Media Queries to load smaller images for smaller screen resolutions and making the background images smaller won't fix the problem; it would just hide the symptoms.</p>
  
  <p>What else should I do to ensure that the background image doesn't block JavaScript execution?</p>
  
  <p>My thought would be to load a dummy background image and then have JavaScript append another stylesheet with the real background images (and media queries for smaller screens) but this seems hacky.</p>