页面加载后带有css和jquery加载器的预加载器

时间:2014-06-24 09:35:55

标签: javascript jquery css onload preloader

我想用css和jQuery为我的网站制作预加载器。这是fiddle。它运作得很好。但问题是我需要在页面加载之前工作。现在预加载器在页面加载后正在工作。

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

只需要在页面load.help ..

之前运行脚本

欢呼谢谢!!

2 个答案:

答案 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-供应商前缀。请根据需要添加其他供应商前缀。