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

are you calling that function in the Document.ready?

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

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();">

Answer 3

You could first make sure that your images are hidden by default (eliminating need for your jQuery hide calls) with some CSS,

.contentwrap img {
    display:none;
}

And then, in your document.ready, you could try the following. I'll admit there will be some redundancies here in that some images may (behind the scenes) be trying to fade in twice, but the end result will look just the same. This is the tradeoff I'll admit in trying to give a simple answer to this.

The situation will be that in your document.ready, some images may have loaded (especially those that were already cached) and some may yet be pending.

// fade in images already loaded:
$('.contentwrap img').fadeIn(1000);
// and tell pending images to do the same, once they've finished loading:
$('.contentwrap img').load(function () {
    $(this).fadeIn(1000);
});

Since jQuery will "stack" your animation effects, once something is fully faded-in, you can call fadeIn on it again, and nothing should (visibly) happen.

If this was unacceptable, you could probably devise some more complex way of checking which images have been faded in and which have not, before you set the load event on them.

Good luck!

Answer 4

I recently dealt with this mess. I answered this similar question, but it's not exactly what you're asking...

http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome/1688283#1688283