Start animation once all images are loaded

[Myows 1 Likes (Newbie)]

Hi

 

Sorry if this more a general js question, but your answer would be appreciated

 

I'm working on an animation and loving the gs TweenMax capacities

(work in progress here: http://max-guedy.com/animation-cofely/complet.html ) and I would like it to start only once all images have loaded, akin to adding a Flash preloader.

 

Could anyone please point me in the right direction?

 

Thanks in advance

[dave1 1 Likes (Newbie)]

Use the load event instead of `ready` to initialize your code.

 

$(window).on('load', function(){
 // code here
});

[Myows 1 Likes (Newbie)]

Brilliant!

 

Thank you Dave (i've implemented on the link above)

 

Next question is what would the cleanest way be to hide the elements that are appearing... - would a display:none be my solution, the start the timeline with a display:visible ?

[dave1 1 Likes (Newbie)]

in your stylesheet add

 

#container {
 visibility: hidden;
}

 

In your script

 

$(window).on('load', function(){
 $('#container').css('visibility', 'visible');
 // code here
});

[Myows 1 Likes (Newbie)]

Hey Thanks Dave

 

I took a slightly different approach thanks to your 1st reply - visible on link above - gives it a preloader effect that fades out when the page is ready