title: Javascript: How do I get the height of unloaded images in a loop?
body: <p>I am loading a json file and parsing it into an array in Javascript. One of the elements is the path to an image. I am not ready to load the images yet but I need to get the image's height. I know how to do that with code like the following (found on other stackoverflow pages)</p>
  
  <pre><code>function getimageheight(img) {
      var tmpImg = new Image();
      tmpImg.onload = function() {
          var ht = this.height;   
          return ht+0;
      }
      tmpImg.src = img;
  }
  </code></pre>
  
  <p>If I try to call this function in a loop, it returns undefined because the onload for the images is running slower than the loop. My actual code is this:</p>
  
  <pre><code>        var j = 0;
          $.each(cat.placemarks, function(index, mark) {
              markers[cat.name][j] = [];
              markers[cat.name][j].name = mark.name;
              markers[cat.name][j].title = mark.title;
              markers[cat.name][j].markerURL = mark.markerURL;
              markers[cat.name][j].imageURL = mark.imageURL;
              markers[cat.name][j].imageHEIGHT = getimageheight(projpath+mark.imageURL);
              j++;
          }); 
  </code></pre>
  
  <p>If I call the function once, it works.  But calling it in a loop does not. How can I fix this?</p>