title: hide div until all background images have loaded
body: <p>Is there a way to wait until all background images have loaded before some code is executed?  I know this works for one image but how can I adapt it for various images?</p>
  
  <pre><code>var firstBackgroundImage = new Image();         
                  firstBackgroundImage.onload = function () {
                          $('#main-slider').animate({opacity:1}),600;
  
              }; 
              firstBackgroundImage.src = "http://www.domain.com/img/iphone.png";
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;div id="main-slider"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#main-slider{
     opacity:0;
  }
  </code></pre>
  
  <p>Thanks!</p>