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

put your code inside of this function. If you use $(document) it works as soon as the dom is loaded. If you use body it starts once the body is fully loaded. That way your images will always fade in after the body is loaded.

$('body').ready(function() {
    //your code here
});

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...

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Answer 5

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 6

Place this bit of code in the section of the site:

<script>
         $('body').ready(function() { 

        $('img').hide();
        $('img').each(function(i) {
            if (this.complete) {
                $(this).fadeIn();
            } else {
                $(this).load(function() {
                    $(this).fadeIn(2000);
                });
            }
        });
    });
 </script>

This may not be the most eloquent solution, but it gets the job done. If you would like to see an example of it in action, check out this site I used it for.