为 CSS 动画预加载图像？

Posted 2023-03-06

【中文标题】为 CSS 动画预加载图像？

【英文标题】：Preloading images for CSS animations?

【发布时间】：2012-07-16 07:02:00

【问题描述】：

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

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

【参考方案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;

【参考方案2】：

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

【参考方案3】：

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