title: How to get jQuery to wait for a list of images to load before processing them?
body: <p>How to tell jQuery to wait for a list of images to be loaded before starting an image carousel?</p>
  
  <p>I have a list of large images that are to be used in an image carousel. These images are of different sizes and I want to use javascript/jQuery to size the viewport according to the widest image and at the same time scale all images to the same height.</p>
  
  <pre><code>&lt;div id="viewport" style="overflow:hidden" class="clearfix"&gt;
      &lt;ul id="carousel" style="width:2000em"&gt;
         &lt;li&gt;&lt;img src="large01.jpg"&gt;&lt;/li&gt;
         &lt;li&gt;&lt;img src="large02.jpg"&gt;&lt;/li&gt;
         &lt;li&gt;&lt;img src="large03.jpg"&gt;&lt;/li&gt;
         &lt;li&gt;&lt;img src="large04.jpg"&gt;&lt;/li&gt;
         &lt;li&gt;&lt;img src="large05.jpg"&gt;&lt;/li&gt;
         &lt;!-- li { float: left } --&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I think I need to wait for all the images to load before I can determine their <code>$(img).height()</code> and <code>$(img).width()</code> but I have tried <code>$(document).ready()</code>, <code>$(window).load()</code>, <code>$(window).ready()</code> with inconsistent results across browsers. Furthermore, it seems that some <code>.load()</code> is deprecated already.</p>
  
  <p>What is the correct method of dealing with this.</p>
  
  <p>Or is there anyway to get the image width and height BEFORE the image is loaded?</p>