页面加载后使用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'); 
});