How does jQuery's "document ready" function work?

Question

How is jQuery checking if the document is loaded? How it is checking that the document load is finished?

Answer 1

Check out the function bindReady in the source code.

They bind to the DOMContentLoaded event (or onreadystatechange on some browsers). They also have a fallback to the regular load event, in case the DOMContentLoaded isn't supported or not fired for other reasons. On browsers supporting it, they use this call:

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

On IE <9:

document.attachEvent( "onreadystatechange", DOMContentLoaded);

The second instance of DOMContentLoaded in these calls is their own function - actually a reference to the ready function right above bindReady in the source code. This function will check that the DOM tree is actually done by checking for document.body. If it doesn't exist yet, they wait a millisecond (using setTimeout) and check again. When document.body exists, they traverse the list of callbacks you've set.

Answer 2

So there is a little bit going on behind the scenes but this is the gist of it, directly for the jQuery source:

// Mozilla, Opera and webkit nightlies currently support this event
        if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }

So for most browsers (Mozilla, Opera and Webkit) there is a DOMContentLoaded event that jQuery is listening for, when that is triggered, then it calls all of the ready handlers you have registered with jQuery.

IE acts a little differently as they don't have the DOMContentLoaded event, they try hooking into the onreadystatechange event of the document, they also hook up the window.onload event, as well as do a sneaky bit of code where they continuously try and scroll the page every millisecond (doScrollCheck). Which ever one of these fires first triggers the ready handlers and the subsequent events are ignored.

I hope that makes sense and helps you out :)

Answer 3

jQuery doesn't do anything that JavaScript cannot/does not do - it's simply a JavaScript framework/library. What it does is provide wrappers around JavaScript events that browsers implement, such as onload ($.load()) and DOMContentLoaded ($.ready()). Of course, there is a lot of work under the hood that attempts to make this behaviour as standard as possible across browsers and works around browser bugs, issues and incompatibilities.

For example, IE didn't really support DOMContentLoaded before IE 9 but jQuery has to provide an implementation for it. You might want to see these links to understand more about what this event is and how one might implement something similar, even without jQuery:

• http://api.jquery.com/ready/#comment-85629494
• http://www.zachleat.com/web/domcontentloaded-inconsistencies/
• http://www.kryogenix.org/days/2007/09/26/shortloaded
• $(document).ready equivalent without jQuery

If you really want to see what's being done by jQuery, you should check out the jQuery source.