完整页面加载后触发动画

Question

我正在创建一个视差网站，你可能都知道它会变得混乱和垃圾。加载页面时，某些图像的加载时间比其他图像要长，因此在加载整个页面之前会触发一些动画。我希望首先加载整个页面，然后准备好所有动画。无论如何我能做到这一点？我正在使用jquery和scrollreveal。

此外，我不知道这是否值得一提，但我已经创建了一个加载屏幕，在页面完全加载后消失。

Answer 1

您可以使用load上的window事件向body添加一个类，并将CSS动画基于该类。

＆＃13;

＆＃13;

window.onload = function() {
  document.body.classList.add('ready');
}

＆＃13;

img {
  transition: transform 5s;
}
.ready img {
  transform: rotate(5400deg);
}

＆＃13;

<img src="http://www.intrawallpaper.com/static/images/Golden-Gate-Bridge-HD-Wallpapers-WideScreen_FK1cfem.jpg">

＆＃13;

＆＃13;

＆＃13;

Answer 2

window.addEventListener("load",()=>{
 //  Code here
})

Answer 3

$(window).on('load', function() {
    // Code here
});

一切都被加载时触发。