Jquery: fadeIn images after DOM has loaded. Works sometimes..?

Question

 //fade in images after the image has loaded..

$(document).ready(function(){
  $(".image_ad").hide().bind("load", function () { $(this).fadeIn(400); });
 });

If anyone has any input this would be great.

I wrote this to avoid having to watch images load on the page, I rather the page loaded then when each image is ready they fade in nicely.

The problem is that sometimes a couple of images will never load, hitting refresh will correct this but I would rather get it perfect and ask if anyone has any idea why.

I have a feeling that sometimes the dom hasn't fully loaded by the time the script has run, I know it's in a document.ready but it might be possible..

thanks again.

Thanks for all the replies! I'll play with the snippets tonight and post back which I found useful. Again your answers are much appreciated.

As seen below, this seems to work very well for my needs. Thanks everyone.

$(document).ready(function(){
   $(".gallery_image").hide().not(function() {
       return this.complete && $(this).fadeIn(100);
   }).bind("load", function () { $(this).fadeIn(100); });
});

just one more thing, I dont like incompleted posts so...

I found that this doesnt work in Firefox 3.6.12.

I'll look in to this.

user113716 · Accepted Answer · 2010-11-25T16:54:31.403

5

I'm guessing it is because the images are cached, so the load never fires.

Try excluding cached images from being hidden:

$(document).ready(function(){
   $(".image_ad").not(function() {
       return this.complete;
   }).hide().bind("load", function () { $(this).fadeIn(400); });
});

or hide them, but do a fadeIn on the complete ones immediately.

$(document).ready(function(){
   $(".image_ad").hide().not(function() {
       return this.complete && $(this).fadeIn(400);
   }).bind("load", function () { $(this).fadeIn(400); });
});

edited Nov 25 '10 at 16:54

answered Nov 25 '10 at 16:41

user113716

299,514
60
431
433

thanks a lot for your reply, this seems to work very well. I have not come across .complete before and when I search I find little to read, it seems like something I need to know about. I'm still in my early steps. Have you a link to some documentation for .complete? – Iamsamstimpson Nov 26 '10 at 14:39
@smoop - [Here's a MSDN doc.](http://msdn.microsoft.com/en-us/library/ms533688\(VS.85\).aspx) I'm not a big fan of W3Schools as a reference, but [here's one from them](http://www.w3schools.com/jsref/prop_img_complete.asp). – user113716 Nov 26 '10 at 15:38

Raphael Schweikert · Answer 2 · 2010-11-25T16:44:44.063

I have a feeling that sometimes the dom hasn't fully loaded by the time the script has run, I know it's in a document.ready but it might be possible..

I think the problem is rather the other way around: the dom may have fully loaded after the images have. So when your load handler gets attached, the images will already have loaded and the handler is never fired.

You can work around this either by checking for image.complete or by inserting the images via js and attaching the load handler right away.

Try:

$(document).ready(function(){
    $(".image_ad").hide().bind("load", function () { $(this).fadeIn(400); }).each(function() {
        if(this.complete && jQuery(this).is(":hidden")) {
            jQuery(this).fadeIn(400);
        }
    });
});

(or something like that).

score 0 · Answer 3 · answered Nov 25 '10 at 16:35

0

Not sure if this will help or not, but you can get rid of the hide() call by just adding this to your css:

img.image_ad{
  display: none;
}

answered Nov 25 '10 at 16:35

joeynelson

405
1
3
10

thanks. There is a good reason that I don't hide the elements using css. If the user has javascript turned off I would like them to still see the content - if they have javascript on I would like the jquery to run as normal. thats jsut me though :P thanks for the input. – Iamsamstimpson Nov 26 '10 at 11:30

score 0 · Answer 4 · answered Nov 25 '10 at 16:36

0

You are better off hiding the images via css class

.image_ad { display:none; }

And then set:

$(document).ready(function(){
    $('.image_ad').fadeIn(400);
});

What this will do is make sure the images are hidden to begin with, and then once everything is received and loaded, fade the images in.

answered Nov 25 '10 at 16:36

Jubair

2,557
2
26
25

1

This will cause them to fade in before they're fully loaded. The purpose of OP's approach is to wait to display them until they are loaded. – user113716 Nov 25 '10 at 16:39
there is also the "what if" that I just wrote above. thanks for your reply though. – Iamsamstimpson Nov 26 '10 at 11:31

score 0 · Answer 5 · answered Nov 25 '10 at 16:42

I adapted this very simple function from some code I found on another forum. It includes a callback function for you to use when the images have finished loading. Although it doesn't fade in each image as it has loaded, it fades in all the images when all the images in a stated container have finished loading. I'm sure you can adapt this code it need be.

function imgsLoaded(el,f){
  var imgs = el.find('img');
  var num_imgs = imgs.length;

  if(num_imgs > 0){
    imgs.load(function(){
      num_imgs--;
      if(num_imgs == 0) {
        if(typeof f == "function")f();//custom callback
      }
    });
  }else{
    if(typeof f == "function")f();//custom callback
  }
}

USAGE:

imgsLoaded($('#container'),function(){

$('.image_ad').fadeIn(400);

});

Hope this helps!

W.

Jquery: fadeIn images after DOM has loaded. Works sometimes..?

5 Answers5

Linked