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

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

答案：

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

Answer 2

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

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

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

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

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

See more here

整页加载后播放css3动画

2 个答案: