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 fad

Answer 1

To deal with cached images, bobince's solution works, but as he said, it's quite ugly.

Another solution would be to hide your images in css and use the following javascript:

$(window).load(function(){
  $('.contentwrap img').not(':visible').fadeIn(1000);
});

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

showImages();

This way, most images are loaded properly, and if they were cached, and hidden right away (the load function not having time to be fired), the page's load event will make them appear. The page's load event ensures that everything was loaded.