我想用css和jQuery为我的网站制作预加载器。这是fiddle。它运作得很好。但问题是我需要在页面加载之前工作。现在预加载器在页面加载后正在工作。
$('.la-anim-1').addClass('la-animate');
只需要在页面load.help ..
之前运行脚本欢呼谢谢!!
答案 0 :(得分:1)
将您的代码保留在文档加载功能下。
$(document).load(function(){
$('.la-anim-1').addClass('la-animate');
});
答案 1 :(得分: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;
}
然后,你的DOM中的jQuery就准备好了:
$('.la-anim-1').removeClass('la-animate');
更好的是,删除元素本身:
$('.la-anim-1').remove();
编辑:添加了标准以及-webkit-供应商前缀。请根据需要添加其他供应商前缀。