Question

由于某些原因，当我使用window.onload = function（）{但不是document.ready = function（）{

时，我的文档可以正常工作

我想使用文档准备就绪的原因是我正在使用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>

Answer 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});

Answer 2

window.onload = function(){是一个原生的javascript函数，所以这就是为什么它是woking而document.ready是一个需要jQuery来处理的jQuery方法。因此，您必须包含jQuery库。

doc ready语法是这样的：

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

Answer 3

分配

window.onload =function(){
}

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

然而，分配：

document.ready=function(){}

意味着您为文档对象定义了一个名为 ready 的新函数，并且该函数从未被调用。因此，这就是为什么代码不是＆＃39 ; t执行。

使用window.onload而不是document.ready时代码有效吗？为什么？

3 个答案: