title: Verify that all images are loaded in `$(window).load()` function before proceeding
body: <p>I am adding a number of large images for a slide-show to a page, but I want to start loading these images only when the normal part of the page is completely loaded (including the images).</p>
  
  <p>To do that, I am adding the images in the <code>$(window).load()</code> function:</p>
  
  <pre><code>var slide_total = 20;
  
  $(window).load(function() {
  
      for (i = 2; i &lt;= slide_total; i++)
      {
          content = '&lt;li&gt;&lt;img src="/images/header' + ((i &lt; 10) ? '0' : '') + i + '.jpg" width="960" height="314"&gt;&lt;/li&gt;';
          $("#slideshow li:last-child").after(content);
      }
  
      slide_interval = setInterval( "slideSwitch()", slide_duration );
  
  });
  </code></pre>
  
  <p>The slide-show <code>slideSwitch()</code> should start when all images are loaded completely, but as it is now, it starts the moment the elements are added to the DOM.</p>
  
  <p>I cannot move the loop to the <code>document.ready</code> function as I don´t want the slide-show to interfere with the loading of the normal images.</p>
  
  <p>How can I check whether all images are loaded before setting the interval?</p>