title: Identify when jQuery load() has finished loading multiple images
body: <p>I have a script that uses jQuery's <code>getScript()</code> function to dynamically load blog posts from tumblr accounts.</p>
  
  <p>The script response is a JSON structure <code>tumblr_api_read</code> that contains (amongst other things) image urls.</p>
  
  <pre><code>function read(blogName) {
      var imageUrls = [];
      $.getScript("http://" + blogName + ".tumblr.com/api/read/js", function() {
          imageUrls = getImageUrls(tumblr_api_read.posts); // returns an array of URLs to use as img src attributes
      }).done(function(script, textStatus) {
          loadImages(imageUrls);
          processTumblrResponse(); // ### ONLY EXECUTE WHEN IMAGES ARE LOADED!!
      });
  }
  </code></pre>
  
  <p>I use the imageUrls array in my function loadImages() to inject <code>&lt;img/&gt;</code>s into the DOM via jquery-built var <code>$temporaryImageContainer</code> and then carry out some further processing.</p>
  
  <pre><code>var imgAjaxComplete = false;
  var imgCount = 0;
  
  function loadImages(imageUrls, $temporaryImageContainer) {
      while (!imgAjaxComplete) {
          for (srcKey in imageUrls) {
              var $image = $("&lt;img&gt;", {"id" : "imageUrl" + srcKey, "src" : imageUrls[srcKey]})
                  .load(function() {
                      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                          console.log("Error loading image: " + imageUrls[srcKey]);
                      } else {
                          $temporaryImageContainer.append($image);
                          console.log("Loaded image: " + imageUrls[srcKey]);
                      }
                  });
              ++imgCount;
          }
          if (imgCount == imageUrls.length) {
              imgAjaxComplete = true;
              imgCount = 0;
          }
      }
      console.log("loadImages() complete");
  }
  
  function processTumblrResponse() {
      console.log("Images loaded. Running processTumblrResponse()");
      // further processing here...
  }
  </code></pre>
  
  <p>The trouble with this is that the <code>for</code> loop in <code>loadImages()</code> executes before anything else (I think that's what's happening anyway) and it only ever tries to load the last image src in <code>imageUrls</code> n times (where n is <code>imageUrls.length</code>).</p>
  
  <p>Is it possible to identify when all of the images injected into the DOM have finished loading BEFORE I carry out the additional processing?</p>
  
  <p>The JSON is too large to post here but let me know if it's needed for context.</p>