代码在使用 window.onload 但不是 document.ready 时有效？为什么？答案

【问题标题】：code works when using window.onload but not document.ready? why?代码在使用 window.onload 但不是 document.ready 时有效？为什么？
【发布时间】：2014-05-10 10:29:28
【问题描述】：

由于某种原因，当我使用 window.onload = function(){ 而不是 document.ready = function(){ 时，我的文档可以工作

我想使用 document ready 的原因是我正在使用 tweenmax 补间的图像加载速度不快，因此动画与其他所有内容一起关闭。

    <script> 


    var footer = document.getElementById("footer");
    var topper = document.getElementById("topper");
    var box = document.getElementById("photo");

    window.onload = function() {
        TweenMax.from(box, 4, {height:"200px", width:"200px", top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-100px", ease:Power3.easeIn});
        TweenMax.from(topper, 4, {top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-105px", width:"210px", ease:Power3.easeOut});
        TweenMax.from(footer, 4, {bottom:"50%", left:"50%", marginBottom:"-100px", marginLeft:"-105px", width:"210px", ease:Power3.easeOut});
    };


     </script>

【问题讨论】：

标签： javascript jquery gsap

【解决方案1】：

$(document).ready(function() {}); 是一个 jQuery 函数，因此您必须在尝试运行它之前添加一个 jQuery 引用。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script> 


    var footer = document.getElementById("footer");
    var topper = document.getElementById("topper");
    var box = document.getElementById("photo");

    $(document).ready(function() {
        TweenMax.from(box, 4, {height:"200px", width:"200px", top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-100px", ease:Power3.easeOut}); // <-- edited Power3.easeIn to Power3.easeOut
        TweenMax.from(topper, 4, {top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-105px", width:"210px", ease:Power3.easeOut});
        TweenMax.from(footer, 4, {bottom:"50%", left:"50%", marginBottom:"-100px", marginLeft:"-105px", width:"210px", ease:Power3.easeOut});
    });


</script>

编辑：更新更改

TweenMax.from(box, 4, {height:"200px", width:"200px", top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-100px", ease:Power3.easeIn});

到

TweenMax.from(box, 4, {height:"200px", width:"200px", top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-100px", ease:Power3.easeOut});

【讨论】：

嗯，我改变了我链接我的 jquery 的位置，它使它工作但没有解决我的时间问题....奇怪。单击“输入”后，您可以在此处看到它 krismadden.fr
你想让盒子和顶部/底部以相同的速度运行吗？
@Kris 看起来是因为盒子是easein 而其他的是easeout。这会导致框启动较慢，而顶部和页脚启动较快。然后盒子结束得更快，而顶部和页脚结束得更慢。使所有三个之一或另一个，看看他们是否在同一时间。更新了答案。
哇。我觉得好傻！太感谢了！！！我想我需要的只是多一双眼睛！
@Kris 有时这就是全部，很高兴我能提供帮助！感谢您接受答案。

【解决方案2】：

window.onload = function(){ 是一个原生 javascript 函数，这就是为什么它正在工作，而 document.ready 是一个 jQuery 方法，它需要 jQuery 才能工作。因此，为此您还必须包含 jQuery 库。

文档就绪语法是这样的：

$(document).ready(function() {
    // do stuff here
});

【讨论】：

【解决方案3】：

分配

window.onload =function(){
}

意味着您指定了在加载窗口时将执行的代码。

但是，分配：

document.ready=function(){}

意味着您为 document 对象定义了一个名为 ready 的新函数，而该函数从未被调用过。因此，这就是代码没有被调用的原因执行。

【讨论】：