javascript - Hide images until they're loaded

Question

I got a jQuery script which is dinamically appending data to the "holder" at some timeinterval. The data looks like this:

<div class="item-box etc etc"> <img src="data.png"> </div>

and I'm loading like 50 images at once, my goal is to make them fadeIn, when each image is loaded.

I've tried the following:

parentDiv.on("load", "img", function() {
    $(this).parent().fadeIn(500);
});

Fiddle: http://jsfiddle.net/3ESUm/2/

but seems that on method doesn't have load or ready methods. I ran out of ideas.

Answer 1

just set the onload property when you add the image.

var img = new Image();
img.src = "some url"
img.onload=function(){$(img).fadeIn(500);}
document.getElementByID('parent').appendChild(img);

see working example here