CODEWITHSUNDEEP
jqueryfadein
Ryan
Ryan

Reputation: 2234

Fading in images one after another AFTER page is loaded

Okay so here is my working code currently...

$(window).load(function() {
     $("#scroller li").each(function(i) {
          $(this).delay(400*i).fadeIn();
     });
});

After the window is loaded, it fades in one image after another, perfectly. But on my page I have links that call in an html file that contains more images into a div. This script just fades the images in, one after another WHILE they are loading, resulting in half cut off images fading in...

So what I want is when the document is ready, it loads all the images, then fades them in.

I need to use jQuery(document).ready(function() to start the script, so a .bind('load') is in order... I think.. I am pretty new at this...

This is what I came up with, but it's not working.. Maybe somebody can tell me why...

$(document).ready(function() {
     $("#scroller li").each(function(i) {
          $(this).bind('load', function(){
               $(this).delay(400*i).fadeIn();
          });
      });
  });

Upvotes: 1

Views: 2084

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191729

It sounds like you want to preload the images. If the images are preloaded, they will be cached so when you display them for the first time the entire image should display instead of being cut off. You can preload images just by using `$("").attr('src', 'source/of/image'); This loads the images in memory and should cache them ahead of time. It will not append them to the DOM.

Upvotes: 0

Keith.Abramo
Keith.Abramo

Reputation: 6955

the load has already happened since $(document).ready waits until the entire page's contents have loaded before it fires the function.

have you tried starting the li or li's as hidden and then just doing this:

$(document).ready(function() {
     $("#scroller li").each(function(i) {
           $(this).delay(400*i).fadeIn();
      });
  });

Upvotes: 1

Related Questions