title: Waiting for images loading with JQuery
body: <p>I trying to wait for images finished to load but it seems that the load event is never matched.</p>
  
  <p>Here's my code :</p>
  
  <pre><code>$(function() {
  var arrowWidth = 22;
  var currentImageID = -1;
  var imageOffsets = new Array();
  var loadedImages = 0;
  var numberOfImages = $("div#sliderGallery &gt; ul &gt; li").size();
  
  $("div#sliderGallery &gt; ul").hide();
  $("div#sliderGallery").append("&lt;div id=\"loading\"&gt;&lt;/div&gt;");
  $("div#sliderGallery &gt; div#loading").append("Chargement en cours ...&lt;br&gt;");
  $("div#sliderGallery &gt; div#loading").append("&lt;img src=\"progressbar.gif\" /&gt;");
  
  function setOffset(imageID) {
      if (imageID != currentImageID) {
          $("ul#slide_items &gt; li &gt; img#"+currentImageID).fadeTo(0, 0.2); 
          currentImageID = imageID;
          $("ul#slide_items &gt; li &gt; img#"+currentImageID).fadeTo("slow", 1);
          $("div#sliderGallery &gt; ul").css("left", imageOffsets[imageID][0]+"px");
          $("div#slideGallery &gt; span.arrow").css("width", imageOffsets[imageID][1]+"px"); 
          $("div#sliderGallery &gt; span#left").css("left", imageOffsets[imageID][2]+"px");
          $("div#sliderGallery &gt; span#right").css("left", imageOffsets[imageID][3]+"px");
      }
  }
  
  
  $("div#sliderGallery &gt; ul &gt; li &gt; img").load(function() {
      alert("never executed ...");
  
      loadedImages++;
      if (loadedImages == numberOfImages) {
          $("div#sliderGallery &gt; div#loading").remove();
          $("div#sliderGallery").css("overflow", "hidden");
          $("div#sliderGallery &gt; ul").show();
          $("div#sliderGallery").append("&lt;span id=\"left\" class=\"arrow\"&gt;&lt;img src=\"arrow_left.png\" /&gt;&lt;/span&gt;");
          $("div#sliderGallery").append("&lt;span id=\"right\" class=\"arrow\"&gt;&lt;img src=\"arrow_right.png\" /&gt;&lt;/span&gt;");
          $("div#slideGallery &gt; span.arrow").fadeTo(0, 0.5);
          $("div#slideGallery &gt; span.arrow").css("padding-top", Math.round((600-146)/2)+"px"); 
  
          var ulWidth = $("div#sliderGallery").innerWidth();
  
          var imageID = 0;
          var imageWidthSum = 0;
          $("div#sliderGallery &gt; ul &gt; li &gt; img").each(function() {
              image = jQuery(this);
              image.attr("id", imageID);
              image.fadeTo(0, 0.2);
  
              imageOffsets[imageID] = new Array();
              // Offset applied to images 
              imageOffsets[imageID][0] = Math.round(ulWidth/2-(imageWidthSum+image.innerWidth()/2));
              // Width applied to span
              imageOffsets[imageID][1] = Math.round(image.innerWidth()/2+arrowWidth);
              // Offset apply to the left span
              imageOffsets[imageID][2] = Math.round($("div#sliderGallery").offset().left+ulWidth/2-imageOffsets[imageID][1]);
              // Offset apply to the right span
              imageOffsets[imageID][3] = imageOffsets[imageID][1]+imageOffsets[imageID][2];
  
              imageID++;
              imageWidthSum += image.innerWidth();
          });
  
          setOffset(0);
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>And html code :
  <a href="http://files.tinybox.net/~fabien/tmp/fe/fegallery/public/" rel="nofollow noreferrer">link text</a></p>
  
  <p>Why this line "alert("never executed ...");" isn't executed ?</p>
  
  <p>Thanks in advance, i'm going insane with this problem :)</p>