Load multiple images in order once they are loaded

Question

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.

Answer 1

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.