title: .load() firing before image ready
body: <p>I have some dynamically loading images that change depending on the link a user clicks.</p>
  
  <p>I need to get the images width and height before displaying the images so that the page can be formatted correctly, however the .load() event will fire before the image is fully loaded and my width / height calls return NULL or 0.</p>
  
  <p>I need a way to check that the images are actually loaded before trying to get the dimensions.</p>
  
  <p>Any help?</p>
  
  <p>CODE:</p>
  
  <p>Ajax Call</p>
  
  <pre><code>function loadImages() {
      //___ Variables
      var xmlhttp;
      var responseArray = [];
  
      if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      } else {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
  
      xmlhttp.onreadystatechange=function() {
  
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
              $("#preload").empty();
              //___ Get server response / Convert to Array / Drop last field
              var responseArray = xmlhttp.responseText.split(',');
              responseArray.pop();
  
              var windowHeight = $(window).height();
              var imgHeight = windowHeight * .9
              if (imgHeight &gt; 1000) {//___ if WindowHeight is &gt; 1000px make images max 900px
                  imgHeight = 900;
              }
  
              //___ Place images in preload
              //$("#preload").append("&lt;div id='contain'&gt;&lt;/div&gt;");
              for(var i=0;i&lt;responseArray.length;i++){
                  $("&lt;img src='"+responseArray[i]+"' id='responseImage"+i+"'&gt;").appendTo("#preload");
              }
              ready();
          }
  
      };
      //console.log(portLink); //Display link clicked
      xmlhttp.open("GET","includes/displayimagesLive.php?portname="+portLink,true);
      xmlhttp.send();
  }
  </code></pre>
  
  <p>ready() function:</p>
  
  <pre><code>function ready() {
      var div = document.getElementById("preload").childNodes;
      var count = $(div).length;
      console.log(count);
  
      $("#responseImage0")
          .load(function() {
              //alert("Loaded");
              alert($("#responseImage"+count).width());
          })
          .error(function() {
              alert("Error");
          });
  }
  </code></pre>