[wait for an animation]

hello
 
friends I want to show an animation while the site is loader completely and I use GSAp to accomplish this task but the page web is get loded fast , and i could not see the animation , how can i delay the load , and ready function of jquery to wait till my animation completed 
 
this is my code in ready function of jquery :

 

$(document).ready(function() {
$('body').fadeOut(100);
$('body').before('

 

');
});

 

and this is my code in load function of jquery :

 

$( window).on('load', function() {

var tl = new TimelineMax();

tl.to($('#preloder'), 0, {backgroundPosition:'0px -237px', delay:3})
.to($('#preloder'), 0, {backgroundPosition:'0px -474px', delay:4})
.to($('#preloder'), 0, {backgroundPosition:'0px -711px', delay:3})
.to($('#preloder'), 0, {backgroundPosition:'0px -948px', delay:5})
.to($('#preloder'), 0, {backgroundPosition:'0px -948px', delay:5});
 

$('.paceDiv').append('<div id="preloder"></div>');

 

$('#preloder').css({
'position': 'absolute',
'top': '190px',
'left': '529px'
});

$('body').fadeIn();
$('.paceDiv').fadeOut();

});