如何在新頁面預加載後在卸載時對頁面進行動畫製作（jQuery）

我試圖在加載新頁面時將頁面動畫化。我要使用的效果與此網站上使用的過程類似http://www.whitefrontier.ch/。我更像一個設計師，而不是開發人員，所以我沒有這樣的運氣。以下是我認爲最接近正確的兩個解決方案。我意識到在那個網站上，他們正在使用fancybox作爲預加載器。我是否需要fancybox才能獲得理想的效果？如何在新頁面預加載後在卸載時對頁面進行動畫製作（jQuery）

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

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

來源

2015-04-24 willy_baller

這是一個很好的資源：http://designhuntr.com/display-animation-while-page-loading-using-jquery/。這顯示瞭解決您的問題的兩種不同方式。 – BIW

'花式框'用於顯示圖像幻燈片放映。 –

而不是使用$ .unload（）爲什麼不使用頁面預加載器？對於必須加載大量靜態資源（如視頻或大圖像）的網頁，這是一種常見的設計模式。你可以這樣設置你的頁面預加載器：

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

來源

2016-01-25 21:54:46 Sean

如何在新頁面預加載後在卸載時對頁面進行動畫製作（jQuery）

回答

相關問題