code works when using window.onload but not document.ready? why?

Question

for some reason my document works when I use window.onload = function(){ but not document.ready = function(){

The reason I want to use document ready is that an image i am tweening with tweenmax is not loading as quickly so the animation is off with everything else.

    <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() {}); is a jQuery function, so you would have to add a jQuery reference before you try to run it.

<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>

EDIT: updated to change

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

to

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

Answer 2

window.onload = function(){ is a native javascript function so that is why it is woking while document.ready is a jQuery method it needs jQuery to work on. So for this you have to include the jQuery library too.

The doc ready syntax is something like this:

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

Answer 3

Assigning

window.onload =function(){
}

meant you specified the code that would be executed when the window has loaded.

However, assigning:

document.ready=function(){}

meant you defined a new function called ready for the document object, and the function has never been called.Hence, that was the reason why the code wasn't executed.