0

I have four images of various sizes. I want them to load in a certain sequence. If I use a load handler they will just appear once they are loaded, and not necessary in order. But if I set them to .fadeIn() in order, then they won't necessarily be loaded.

Any ideas? Here's what I've got so far:

$('.z2').load(function(){
    $(this).fadeIn(600);
    $('.z4').delay(300).fadeIn(1900, function(){
        $('.z1').fadeIn(3250);                                  
                        });
                       });

I let z2 and z4 fadeIn at the same time because z2 is larger than z4, and then I set z1 to fadeIn once z4 is loaded, because z4 is bigger.

I'm thinking I might have to set some global variables, so that the pictures will fade in once the variables are met, and the variables will be set by the load functions. Any other ideas though would be great so that I don't waste too much time on this.

bozdoz
  • 12,550
  • 7
  • 67
  • 96

1 Answers1

0

Instead of the load function calling fadein, have it keep track of how many images have been loaded. Set a var to 0. Every time one of those images loads, increment the var. When the var hits 4, THEN schedule the fadeins.

Playing with the delays is fine, but a network glitch could cause a "small" image to load long after a "big" one.

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • I really want them to appear as they are loaded, but in sequence. Doing what you suggest would mean that the load time is the longest that it could be, waiting for all of the images before any are shown. – bozdoz Jan 31 '11 at 21:50
  • Ah. true. But either way, you'd have to keep the "later" images from showing up before one of the "Earlier" ones, which means you'd need to keep a client-side list of what's been loaded. If image #2 finishes before #1, then don't display it until #1 completes, etc... – Marc B Jan 31 '11 at 23:59