首先下載頁面，然後顯示/動畫內容

Question

有什麼辦法可以強制瀏覽器在顯示任何內容之前等待頁面下載？

我有一個網頁上有多個動畫。第一次加載時，動畫不穩定，看起來令人難以置信的錯誤，因爲他們正在動畫的內容仍在下載。我需要先下載所有內容，然後才能順利執行動畫。這可能嗎？

動畫是CSS3動畫。

感謝

Answer 1

$(window).on('load', function() { 
    // do stuff 
}); 

將等待頁面和外部資源，如圖像發射之前加載。

如果動畫是CSS動畫，使用類或其他選擇，當窗口已經加載到啓動動畫

$(window).on('load', function() { 
    $('.animated').addClass('start'); 
}); 

和CSS

.animated { 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
     -o-transition: all 0.3s ease-out; 
      transition: all 0.3s ease-out; 
} 

.start { 
    color: red; 
    left: 100px; 
    /* whatever you'd like to animate */ 
} 

Answer 2

$(window).load(function() { 
    /* here you can use some "addClass" functions. Once added they trigger your CSS animations */ 
});