Jak animować stronę po zwolnieniu, po wczytaniu nowej strony (jQuery)

Question

Próbuję animować stronę podczas ładowania nowej strony. Efekt, który zamierzam, jest podobny do procesu używanego w tej witrynie http://www.whitefrontier.ch/. Jestem bardziej projektantem niż programistą, więc nie miałem z tym szczęścia. Poniżej znajdują się dwa rozwiązania, które próbowałem, które moim zdaniem są najbliżej prawidłowe. Zdaję sobie sprawę, że na tej stronie używają fancybox jako preloadera. Czy potrzebuję fancyboxa, aby uzyskać pożądany efekt?

$(window).load(function() { 
    $('a').animate({right: '250px'},"slow"); 
    }); 

$(window).on('beforeunload', function(){ 
    $('a').animate({right: '250px'},"slow"); 
}); 

Answer 1

Zamiast używać funkcji $ .unload(), dlaczego nie używać pre-loadera strony? Jest to powszechny wzorzec projektowy dla stron internetowych, które muszą ładować duże zasoby statyczne (takie jak filmy lub duże obrazy). Można ustawić swoją stronę pre-loader tak:

//example js 
//Show your web page once all the assets are fully loaded 
$(window).load(function() 
{ 
    $('#preLoader').hide(); //Or whatever animation you want to remove the preloader 
    $('#pageWrapper').show(); //Or whatever animation you want to show the page 
}); 

<!-- Example HTML --> 
<div id="preLoader"> 
    <h1>Loading.....</h1> 
</div> 
<div id="pageWrapper" style="display:none;"> 
    [page content goes here] 
</div>