Jquery: fadeIn images after DOM has loaded. Works

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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.