title: Fire function after each image is loaded
body: <p>I am trying to fill a div with images and size the images to fit just right in their place.  The problem is that when the image is not loaded, the dimensions x , y cannot be sampled from the  element.  This is what I am trying to do after looking up some examples on stack overflow.  It does not work...</p>
  
  <pre><code>    $.each(data.data.children, function(i,item){
          // Some images come in with a busted link. Hence the IF statement...
          if (item.data.url.indexOf(".jpg")&gt;0){
              var imgTitle = item.data.title;
              imgTitle = imgTitle;
              $('&lt;div id="c'+i+'"&gt;&lt;/div&gt;').attr("class", "imgDiv").appendTo("#photos");
              $("&lt;img/&gt;").attr("src", item.data.url).attr("id", "pic"+i).attr("class", "pics").appendTo("#c"+i);
                  .load(function(){
                      $(this).fadein("slow");
                      if (iWidth&gt;iHeight){
                          $('#pic'+i).width(270);
                          $('#pic'+i).height(parseInt(270-imgTitle.length/3));
                      }
                  });
  
              $("&lt;p&gt;"+imgTitle+"&lt;/p&gt;").attr("id", "p"+i).appendTo("#c"+i);  
              $("&lt;img/&gt;").attr("src", "images/RedX2.png").attr("class", "xit").appendTo("#c"+i);
  
              var mImg = $('#pic'+i)[0];
          }
      });
  </code></pre>
  
  <p>Alternatively, is there a way to do proportional fitting of an image inside the padding space proportionally? </p>
  
  <p>TIA</p>
  
  <p>DK</p>
  
  <p><img src="https://i.stack.imgur.com/QUzGA.jpg" alt="enter image description here"></p>