title: delaying the loading of a certain css background image
body: <p>in a CSS like this :</p>
  
  <pre><code>...
  #big-menu {
      background: #fff url(../images/big-menu.jpg) no-repeat;
  }
  #some-menu {
      background: #fff url(../images/some-menu.jpg) no-repeat;
  }
  #some-other-menu {
      background: #fff url(../images/some-other-menu.jpg) no-repeat;
  }
  ...
  </code></pre>
  
  <p>is there a way to delay the loading of <code>#big-menu</code>'s background image, so that it loads after everything else, including all of the images in the HTML, and every other CSS background (the <code>some-menu</code> and <code>some-other-menu</code>).</p>
  
  <p>The reason is, big-menu.jpg is very heavy in size, and I want it to be loaded last. After all, it just serves as an eye-candy, and there are other background images that have a better use than that. (such as the ones used in buttons)</p>
  
  <p>Does the order of putting it in CSS or the occurrences of the markup (<code>#big-menu</code>) in HTML got anything to do with what gets loaded first ? or is there a more reliable way to control it ? javascript (jQuery preferred) is fine.</p>