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

Answer 2

It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can test the value of the image's .complete property.

$(document).ready(function() { 

    $('img').hide();
    $('img').each(function(i) {
        if (this.complete) {
            $(this).fadeIn();
        } else {
            $(this).load(function() {
                $(this).fadeIn();
            });
        }
    });
});

Answer 3

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.

Answer 4

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 5

I just answered this over at this thread: jQuery How do you get an image to fade in on load?

Works for me!

Answer 6

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 7

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 8

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 9

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.

Answer 10

I use the cool script of David DeSandro to check if images have loaded. (e.g. you can write a function which adds a class to the loaded images, so they will fade in using css transition. check it out:
http://desandro.github.io/imagesloaded/

Answer 11

You could take all the images and put them into one image and fade that in, but then they all come in at the same time, and it will be a big file. It depends what you want to use it for.