jquery - 整个页面加载后播放CSS3动画

Question

我一直在尝试根据 this 使用 jquery 设置 css3 动画在整个页面加载后加载。但无济于事。任何人都知道任何其他方式，或者也许有我忽略的东西？谢谢。

这是我的代码:

<script src="scripts/jquery-1.8.0.js" type="text/javascript"></script>

<img id="anim" src="image/some image.png" alt="image"/>
<script type="text/javascript" charset="UTF-8">
    $("window").load(function() {
        $("#anim").addClass("animation");
    });
</script>

类动画是我放置 css3 动画的地方。请注意，当我将类直接包含到图像中时，动画运行正常。

Answer 1

尝试用以下内容包围您的代码:

$(document).ready(function() {
 //Your code here
})

.ready(handler) 指定 DOM 完全加载时要执行的函数。

和handler是在DOM准备好后执行的函数。

虽然 JavaScript 提供了在渲染页面时执行代码的 load 事件，但只有在完全接收到所有资源(例如图像)后，才会触发该事件。在大多数情况下，一旦 DOM 层次结构完全构建完毕，脚本就可以运行。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 的最佳位置代码。当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

See more here