javascript - 页面加载后使用 css 和 jquery 加载器进行预加载

Question

嗨，我想用 css 和 jQuery 为我的网站制作一个预加载器。这是fiddle .它运行完美。但问题是我需要它在页面加载之前工作。现在预加载器在页面加载后开始工作。

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

只需要在页面加载之前运行脚本.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;
}

然后，您的 DOM 内的 jQuery 准备就绪:

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

更好的是，删除元素本身:

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

编辑:添加了标准以及 -webkit- vendor 前缀。请根据需要添加其他 vendor 前缀。