I have implemented a preloader for my site, it uses GSAP and a timeout function to ensure that the animation runs, even if the page has loaded (quickly).

However, upon uploading to the server (www.ainsleyclark.com), I have encountered that the preloader doesn't run on page refresh, I can only assume that this has something to do with the set timeout function but cant figure it out.

Many thanks in advance. 

2.     /*
3.         PreLoader
4.     */
5.     $("#preloader svg").removeClass("hidden");
6.     $("#preloader h1").removeClass("hidden");
7. 
   
8.     $(window).on('load', function() {
9. 
   
10.         //Header Animation
11.         TweenLite.from("#preloader h1", 0.6, {
12.             y: -40,
13.             opacity: 0,
14.             ease: Sine.easeIn
15.         })
16. 
    
17.         //PreLoader Logo Animation
18.         var preLoaderTL = new TimelineMax({
19.             repeat: 2,
20.             yoyo: true,
21.             repeatDelay: 1
22.         });
23. 
    
24.         preLoaderTL
25.             .to("#left_logo", 0.6, {
26.                 strokeDashoffset: 0,
27.                 ease: Sine.easeIn
28.             })
29.             .to("#slash", 0.6, {
30.                 strokeDashoffset: 0,
31.                 ease: Sine.easeIn
32.             }, "-=0.4")
33.             .to("#right_logo", 0.6, {
34.                 strokeDashoffset: 0,
35.                 ease: Sine.easeIn
36.             }, "-=0.4")
37. 
    
38.         //Sets a timeout for the preloader so it doesnt load too early.
39.         setTimeout(function() {
40.             $('#about, #skills, #contact').show();
41.             TweenLite.to("#preloader h1", 0.6, {
42.                 y: 40,
43.                 opacity: 0,
44.                 ease: Sine.easeIn
45.             });
46.             $("#preloader").fadeOut('slow', function() {
47.                 drawLogoTL.play();
48.                 homeBannerTL.play();
49.             });
50.         }, 3000);
51.     });