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);
});

score 9 · Answer 1 · answered Nov 09 '09 at 13:39

9

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

answered Nov 09 '09 at 13:39

bobince

528,062
107
651
834

yes i guessed this was the problem, im wondering if chucking a setTimeout in somewhere might fix this... – James Nov 09 '09 at 14:59
Well you could have an arbitrary timeout by which time you *hope* the images will be loaded, instead of waiting on load events, but of course you couldn't guarantee that they actually were... – bobince Nov 09 '09 at 15:18
just realized i was thinking about the problem in the wrong way. a timeout wont solve this. hmm – James Nov 09 '09 at 17:36

score 7 · Answer 2 · answered Oct 11 '12 at 15:01

7

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

answered Oct 11 '12 at 15:01

Fint

595
5
5

Could something like this work ? `$(document).ready(function() { $('img').hide(); $(window).on('load', function () { $('img').each(function(i) { if (this.complete) { $(this).fadeIn(); } }); }); ` – Olou Jan 14 '19 at 18:45

score 4 · Answer 3 · answered Feb 27 '13 at 19:18

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.

score 2 · Answer 4 · answered Nov 09 '09 at 19:40

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!

sadly this fades in images even when not fully loaded. i wonder if it is possible to only hide/fade in on load images if they are not loaded when document ready is executed. so cached images are left alone. — James, Nov 10 '09 at 09:41

score 2 · Answer 5 · edited May 23 '17 at 12:24

2

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

Works for me!

edited May 23 '17 at 12:24

Community

1
1

answered Feb 08 '11 at 11:37

user607972

59
1

score 0 · Answer 6 · answered Nov 09 '09 at 13:05

0

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

answered Nov 09 '09 at 13:05

LiamB

18,243
19
75
116

yes i am. i have plenty of other jquery going on aswell all working fine. – James Nov 09 '09 at 13:07
`$(document).ready` should fire after all HTML, including images, are loaded. – chelmertz Nov 09 '09 at 13:46
4

it fires after the DOM is loaded – James Nov 09 '09 at 14:57
@chelmertz, it doesn't wait for all images to have loaded. Only the DOM, as James points out. – Drew Noakes Jun 19 '11 at 16:21
1

This is more of a comment and not an "answer." – sheriffderek Feb 21 '14 at 19:06

score 0 · Answer 7 · edited May 23 '17 at 11:45

0

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)

edited May 23 '17 at 11:45

Community

1
1

answered Nov 09 '09 at 19:43

Nosredna

83,000
15
95
122

score 0 · Answer 8 · answered Sep 16 '13 at 16:47

0

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/

answered Sep 16 '13 at 16:47

Fint

595
5
5

score 0 · Answer 9 · answered Dec 24 '15 at 09:21

0

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.

answered Dec 24 '15 at 09:21

score 0 · Answer 10 · edited Jun 19 '11 at 16:22

0

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
});

edited Jun 19 '11 at 16:22

Drew Noakes

300,895
165
679
742

answered Dec 02 '10 at 20:10

justin

9

question is about image loading, not page loading – Ivan Solntsev Dec 05 '12 at 20:27

Guillaume Flandre · Answer 11 · 2011-12-17T18:11:21.467

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.

Making images fade in on image load using jquery

11 Answers11

Linked