Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making images fade in on image load using jquery

Tags:

jquery

fadein

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);
});
like image 856
James Avatar asked Nov 09 '09 13:11

James


5 Answers

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();">
like image 118
bobince Avatar answered Nov 10 '22 05:11

bobince


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();
            });
        }
    });
});
like image 27
Fint Avatar answered Nov 10 '22 05:11

Fint


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.

like image 27
Ted Rysz Avatar answered Nov 10 '22 05:11

Ted Rysz


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!

like image 2
Funka Avatar answered Nov 10 '22 03:11

Funka


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

Works for me!

like image 2
user607972 Avatar answered Nov 10 '22 03:11

user607972