title: window.onload sometimes fires before images have their sizes set
body: <p>I'm using some jQuery to reposition images and text to the center of the window in a trivial little slideshow. Naturally, I have to wait until the images have been loaded before doing this, otherwise their size is 0 and the image is placed with the top-left at the middle of the page instead of being offset correctly.</p>
  
  <p>To make sure the images are loaded, I attach the javascript function to $(window).load, like this:</p>
  
  <pre><code>$(window).load = start_slideshow()
  function center() {
      e = $(this)
      e.css("position","absolute");
      e.css("top", (($(window).height() - e.outerHeight()) / 2) + $(window).scrollTop() + "px");
      e.css("left", (($(window).width() - e.outerWidth()) / 2) + $(window).scrollLeft() + "px");
      return this;
  }
  
  function start_slideshow() {
      $(".text").each(center);
      $(".image").each(center);
      $(".slide").each(function() { $(this).hide() } );
      next_slide()
  }
  </code></pre>
  
  <p>This works, most of the time. Yet sometimes when refreshing an image will be off-center with its top-left coordinates at the middle, as if it hadn't been loaded by the time the javascrpt was called. I see this maybe one time in five on mobile Safari.</p>
  
  <p>I'm not doing anything special with the images:</p>
  
  <pre><code>&lt;div class="image"&gt;
      &lt;img src="http://4.bp.blogspot.com/_OxhGU7eVQls/TQ_8RSFptmI/AAAAAAAAAF0/2pKKeDQEK1A/s1600/rainPA_468x409.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>window.onload is supposed to be <em>after</em> all resources are downloaded, so why would the javascript sometimes be executed before an image has its size set correctly? What's the right way to ensure all images are loaded, if window.onload doesn't do this reliably?</p>