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

Download page first then display/animate content

本文关键字：动画 显示 然后 下载      更新时间：2023-09-26

有什么方法可以强制浏览器在显示任何内容之前等待页面下载吗？

我有一个网页，上面有多个动画。第一次加载时，动画很不稳定，看起来非常错误，因为他们正在制作动画的内容仍在下载中。我需要先下载所有内容，这样动画才能顺利执行。这可能吗？

这些动画是CSS3动画。

感谢

$(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 */
}

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