Difference between document.ready and window.load in jQuery


Difference between document.ready and window.load in jQuery

On of the most useful thing in jQuery, if not the most useful, is for sure its beautiful event system, that could help you and speed up development on the JavaScript side of your web application. Its simplicity is really a fundamental weapon of this library and it provides a lot of tools for every situation on your road.

Today I want to talk about DOM and resource events, more specifically about two of the most used events by developers: document.ready and window.load.


document.ready

The first one is the event that is triggered when the DOM is ready: the browser have read all the DOM three and build its structure. This event occurs when the markup of the page is fully read by the browser, so from now jQuery know the structure of the page, the list of objects that compose it and more informations about what is coming to load next (images, audio, external resource, etc).

This is normally the right place to let start other JavaScript code to manipulate the DOM such animations on text, moving blocks, launch plugins works and instantiate events on objects of the DOM.

Remember: in this phase, images, videos, audios and other resources are non loaded yet, so the space occupied by them could be 0px if not set in HTML, they can't start to play correctly, they can't be fully manipulated, etc. etc..

An example of implementation:

$(document).ready(function(){

    // The document is fully loaded - LET'S START

    $('p').css({'color': '#FF0000'});
    $('.menu__element').show();
    $('#news-container').plugify({
        auto: false,
        color: '#999999'
    });

});

window.load

The second one is the event triggered when every resources of our web page are fully loaded: images, videos, audio, etc.. This event could be very useful when you need to work with this type of objects and manipulate some of their aspect, for example resize and image to become 2x of its original size.

In fact, as explained before, in document.ready we don't know this type of informations (if not defined in <img> tag with height and width attributes) because we just have the DOM fully readed, but not its resources loaded.

An example of implementation:

$(window).load(function(){

    // The document and the resources are fully loaded - LET'S START

    // find the width of my image
    var imgWidth = $('.my-img').width();

    // calculate new width
    var newWidth = imgWidth * 2;

    // set new width
    $('.my-img').width(newWidth);

});


Look at this line:

var imgWidth = $('.my-img').width();  

Put this line on document.ready could be give us bad/wrong/undefined values and our changes to the image will failed. This is one of the biggest point of our post.


What about put all of our code inside a window.load statement?

Please, don't. Seriously...don't do this.

Someone could think this is a great idea: full DOM ready, every resource is downloaded...now we are ready to roooock! NO.
I could write a book about how this is a bad idea, but I will focus on just the 3 most important points about this:

  • It's not how it works: why I have to waiting for loading of all resources to animate a simply container? Why I have to waiting the loading of all resources to start my plugins that work with rendered text?
  • Long waiting time: think about a web page that contains a lot of resources, some of them weight much and the user have poor connection speed. Your whole JavaScript app will not start until every resource is fully loaded. Crappy situation.
  • Bad design: sometimes it's fun to have some animation that start as soon the page is visible. If we put our code in the window.load statement we could be see a bad designed page if our CSS don't provide a good way to hide our pre-start animations.

Hope this could be helpful.
If you notice that I've missed something important or you have some question, let me know in the comments!



Daniele Petrarolo

Daniele Petrarolo

http://www.danielepetrarolo.com

In love with #JavaScript, #PHP and #Python / Web Developer / There's no place like 127.0.0.1.

View Comments