title: Check if dynamically loaded images are complete
body: <p>I have a code that post to a php script that reads all files in a folder and returns them, all of them are img's, the jquery parses the information, on a var that's an array each image is saved as an img object with the src , width, height and attr, on successed I want to check if each image is loaded and then finally on complete fire another function and remove a div. But I don't know how to check if the image has loaded completely, I've been fooling around with .complete but it never seem's to load, the function calls itsef upon until the img is loaded and then returns true so it can keep going. here's the code, it's kind of messy and probably not a nice coding.</p>
  
  <pre><code>var gAllImages = [];
  function checkFed()
  
  {
      var leni = gAllImages.length;   
      for (var i = 0; i &lt; leni; i++) {
  
  
          if (!gAllImages[i].complete) {
              var percentage = i * 100.0 / (leni);
              percentage = percentage.toFixed(0).toString() + ' %';
              console.log(percentage);
              //  userMessagesController.setMessage("loading... " + percentage);
              checkFed();
  
              return;
  
          }
  
      //userMessagesController.setMessage(globals.defaultTitle);
      }
  }
  
  
   if($('slideshow')){
   var topdiv = '&lt;div id="loading"&gt;&lt;div class="centered"&gt;&lt;img src="/karlaacosta/templates/templatename/images/ajax-loader.gif" /&gt;&lt;/div&gt; &lt;/div&gt;';
      $('#overall').append(topdiv);
      //console.log('alerta');
      var jqxhr = $.post('http://localhost/karlaacosta/templates/templatename/php/newtest.php', function(data){
  
  
  
          var d = $.parseJSON(data);
          //console.log(d[1]);
  
  
  
          if(typeof(d) == 'object' &amp;&amp; JSON.parse){
              var len = d.length;
              //console.log(len);
  
  
  
              for(var i = 0; i &lt; len; i++){
                  var theImage = new Image();
                  var element = d[i].split('"');
                  //        console.log(element);
                  //      console.log(element[4]);
                  theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];
                  theImage.width = element[2];
                  theImage.height = element[4];                   
                  theImage.atrr = element[6];
                  gAllImages.push(theImage);
  
              }
  
  
  
  
  
          // console.log(html);
          }else{
              console.log('error');
          }
      }).success(function (){
  
  
  
  
      setTimeout('checkFed', 150);
  
  
  
  
      }).error(function(){
          var err = '&lt;div id="error"&gt;&lt;h2&gt;Error: Lo sentimos al parecer no se pueden cargar las imagenes&lt;/h2&gt;&lt;/div&gt;';
          $('#loading').append(err);
  
      }).complete(
          function(){
              var len = gAllImages.length;
              var html = '&lt;ul class="slides"&gt;'    
              for(var i = 0; i &lt; len; i++){
                  html += '&lt;li&gt;&lt;img src="'+gAllImages[i].src+'" width="'+gAllImages[i].width+'" height="'+gAllImages[i].height+'" attr="'+gAllImages[i].attr+'" /&gt;&lt;/li&gt;';
  
  
              }
              html += '&lt;/ul&gt;';
              $('#slideshow').append(html);
          }
          );
   jqxhr.complete(function(){
      //
      imageSlide();
      $('#loading').remove();
      //
      console.log('completed');
  });
  }
  </code></pre>
  
  <p>If I take out the recursivity of checkFed() obviously the script finishes and when the images are put on the html they are loaded fine and fast, are in the cache never being loaded? any other sugestions on other parts of the code are also welcomed.</p>