Question

在显示任何内容之前，我是否可以强制浏览器等待页面下载？

我有一个包含多个动画的网页。第一次加载时，动画是生涩的，看起来非常错误，因为他们动画的内容仍在下载。我需要先下载所有内容，以便动画可以顺利执行。这可能吗？

动画是CSS3动画。

由于

Answer 1

$(window).on('load', function() {
    // do stuff
});

将在开始之前等待页面和外部资源（如图像）加载。

如果动画是CSS动画，请使用类或其他选择器，并在加载窗口时附加这些动画以启动动画

$(window).on('load', function() {
    $('.animated').addClass('start');
});

和CSS

.animated {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.start {
   color: red;
   left: 100px;
   /* whatever you'd like to animate */
}

Answer 2

$(window).load(function() {
    /* here you can use some "addClass" functions. Once added they trigger your CSS animations */
});

首先下载页面然后显示/动画内容

2 个答案: