title: preload hidden CSS images
body: <p>I'm working on a jquery based homepage with 5 or so hidden divs, each containing several background css images. </p>
  
  <p>The issue is that the browser doesn't load css images into the DOM until the visibility of the parent layer is shown, causing images to slowly load in when the layer becomes visible. </p>
  
  <p>Solutions I've already considered:</p>
  
  <ul>
  <li>CSS sprites (too much work to redesign for this, and wont really work when showing/hiding divs)</li>
  <li><a href="http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/" rel="noreferrer">This jQuery plugin</a> that auto-loads CSS background images (simply doesn't work for me as reported by many others). </li>
  <li><p>preloading the images via js:</p>
  
  <pre><code>$(function() {
  function preloadImg(image) {
    var img = new Image();
    img.src = image;
  }
  
  preloadImg('/images/home/search_bg_selected.png');
  });
  </code></pre>
  
  <p>This solution seems to load the image into the dom twice...once when the js loads it, and then again when the div layer that loads it becomes visible... so it makes 2 HTTP calls, thus not working.</p></li>
  </ul>
  
  <p>Any other solutions for this problem that I'm missing?</p>