整个页面加载后播放css3动画答案

【问题标题】：play css3 animation after entire page load整个页面加载后播放css3动画
【发布时间】：2014-07-31 16:08:00
【问题描述】：

我一直在尝试根据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 动画的地方。请注意，当我将类直接包含到图像中时，动画运行良好。

【问题讨论】：

所以我的错是我用“”包围了窗口。它应该是 $(window).load() 而不是 $("window").load ，对不起，我的错误。

标签： jquery animation css

【解决方案1】：

尝试用以下代码包围您的代码：

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

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

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

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

See more here

【讨论】：

它正在工作！但我希望使用 window.load 而不是 $(document).ready ，但无论如何这现在就可以了，谢谢！

【解决方案2】：

看看http://api.jquery.com/ready/

答案：

<script type="text/javascript">
  $(function() {
    $("#anim").addClass("animation");
  });
</script>

【讨论】：