頁面加載後使用CSS和jQuery加載器的預加載器

Question

嗨，我正在用CSS和jQuery爲我的網站添加一個預加載器。這裏是fiddle。它工作完美。但問題是我需要這個在頁面加載之前工作。現在preloader正在加載頁面後工作。

$('.la-anim-1').addClass('la-animate'); 

只需要頁面load.help之前運行的腳本..

歡呼聲謝謝！

Answer 1

在這種情況下，您應用CSS的方式不起作用。你需要關鍵幀動畫。這個想法是在渲染元素後立即開始動畫，然後當頁面加載完成時，通過刪除類（最好還是刪除元素本身）來停止它。

演示：http://jsfiddle.net/abhitalks/KWh5d/6/

先從類元素應用：

<div class="la-anim-1 la-animate"></div> 

添加到您的CSS：

@-webkit-keyframes preloader { 
    0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); } 
    100% { opacity: 1; -webkit-transform: translate3d(0%, 0, 0); } 
} 
@keyframes preloader { 
    0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 
    100% { opacity: 1; transform: translate3d(0%, 0, 0); } 
} 

，然後將此動畫添加到您的.la-anim-1.la-animate等級：

.la-anim-1.la-animate { 
    -webkit-animation: preloader 5s infinite; 
    animation: preloader 5s infinite; 
} 

然後，你的jQuery中的DOM準備：

$('.la-anim-1').removeClass('la-animate'); 

而且更好的是，刪除元素本身：

$('.la-anim-1').remove(); 

編輯：新增標準與-webkit-一起供應商前綴。請根據需要添加其他供應商前綴。

Answer 2

保持您的代碼在文檔加載功能下。

$(document).load(function(){ 
    $('.la-anim-1').addClass('la-animate'); 
});