fadein - Making images fade in on image load using jquery

Question

I have a page full of images and I want each of them to fade in when loaded. I have the following code which works but seems buggy, basically sometimes not all the image fade in.

Does anyone have any suggestions of how to improve this.

Thanks

$('.contentwrap img').hide().load(function () {
    $(this).fadeIn(1000);
});

Answer 1

sometimes not all the image fade in.

Yeah, this is typically a fairly basic problem: some images finish loading before you've assigned them a load event handler. This is especially likely when the images are cached.

If the images are in the HTML the only reliable way is, unfortunately, to include an (extremely ugly) inline onload attribute:

<img src="..." alt="..." onload="$(this).fadeIn();">