Come animare una pagina allo scaricamento, dopo che la nuova pagina è stata precaricata (jQuery)

Question

Sto cercando di animare una pagina mentre una nuova pagina si sta caricando. L'effetto che sto facendo è simile al processo utilizzato in questo sito http://www.whitefrontier.ch/. Sono più un designer che uno sviluppatore quindi non ho avuto fortuna con questo. Di seguito sono elencate le due soluzioni che ho provato che ritengo siano le più vicine alla correttezza. Mi rendo conto che su quel sito stanno usando fancybox come preloader. Ho bisogno di fancybox per ottenere il risultato desiderato?

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

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

Answer 1

Invece di utilizzare $ .unload() perché non utilizzare un pre-loader di pagina? Questo è un modello di progettazione comune per le pagine Web che devono caricare asset statici di grandi dimensioni (come video o immagini di grandi dimensioni). È possibile impostare la pagina pre-loader in questo modo:

//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>