title: Hide images until they're loaded
body: <p>I got a jQuery script which is dinamically appending data to the "holder" at some timeinterval. The data looks like this:</p>
  
  <pre><code>&lt;div class="item-box etc etc"&gt; &lt;img src="data.png"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>and I'm loading like 50 images at once, my goal is to make them <code>fadeIn</code>, when each image is loaded. </p>
  
  <p>I've tried the following:</p>
  
  <pre><code>parentDiv.on("load", "img", function() {
      $(this).parent().fadeIn(500);
  });
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/3ESUm/2/" rel="nofollow">http://jsfiddle.net/3ESUm/2/</a></p>
  
  <p>but seems that <code>on</code> method doesn't have <code>load</code> or <code>ready</code> methods. I ran out of ideas.</p>