how did jquery implement $(document).ready()?

Question

how did jquery implement $(document).ready()?

of course I can read the code, but I am looking for the concept...

Answer 1

Concept: jQuery.ready

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

It implements it depending upon browser (IE, for instance, is different) but takes in some special cases such as when it is invoked after the DOM is loaded. (I'm not sure how this question can be answered without looking at the source).

The heart of jQuery.ready (the thing that sets up the event bindings is):

bindReady: function() {

Only bind once.

    if ( readyBound ) {
        return;
    }
    readyBound = true;

Make sure to handle case where ready called after "DOM load".

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

W3C standard event model.

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

Old-school fallback.

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

IE event model (also likely Opera will work with this).

    // 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);

Old-school fallback.

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

More behavior to get it to work consistently with IE in different contexts. Note that the event binding is for 'onreadystatechange'

        // 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();
        }
    }
},

doScrollCheck sets up a "poll" in IE that will only invoke the handler when the success condition succeeds. See the source for details (it uses a quirk of IE).

Happy coding.

Answer 2

In general, It checks if the browser already loaded the body element to the DOM tree, in that case it executes the cb() without waiting for the other requests(images...)

otherwise it waits sometime and recheck..

Answer 3

It tests if document.body does not evaluate to something falsy: http://james.padolsey.com/jquery/#v=1.5.0&fn=jQuery.ready