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

我认为你可以通过将所有js移到html的底部来完成同样的事情，以便在所有css和图像之后加载它。

Answer 3

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

为CSS动画预加载图像？

3 个答案: