image - 为 CSS 动画预加载图像？

Question

我在图像上有一个 css 动画，我希望它在页面加载时播放。当前发生的情况是在加载页面的前几次没有播放动画的情况下加载图像。之后工作正常。我猜图像被缓存了。

有没有办法预加载图像以便动画立即生效？

Answer 1

我建议不要在图像加载之前应用动画，而不是预加载图像。使用 jQuery，只有在所有内容都加载后，您才能将类应用于图像：

$(window).bind("load", function(){
    $("#future-head-hand").addClass("loaded");
});

然后将动画应用于该类：

.loaded {
    position: absolute;
    left: 60%;
    bottom: -40%;
    margin-left: -190px;
    -webkit-animation-name: FadeIn;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 1s;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -webkit-animation-name: movinghand;
    -webkit-animation-duration: 0.5;
}

Answer 2

如果您使用的是 Adob​​e Edge，您可以进入View > Preloader Stage并添加一个微调器或类似的东西，以显示动画在实际准备好之前正在加载。

Answer 3

我认为您可以通过将所有内容js移到底部来完成相同的操作，html以便在所有 css 和图像之后加载。