CODEWITHSUNDEEP
jquery
deen
deen

Reputation: 487

$(document).ready() - How it is being executed?

$(document).ready() - How it is being executed?. Whether the cursor will be waiting in that piece of line in order to execute the code after DOM creation OR this method will be executed like event handler after the DOM has been created by the browser?

What if the image doesnt get downloaded but the $(document).ready() gets executed to read the that image's src attribute to assign to some other local variable after the DOM construction?

Upvotes: 3

Views: 207

Answers (3)

Brooks Hanes
Brooks Hanes

Reputation: 425

It's fired when the DOM is ready. Fire when DOM is ready...

Upvotes: 0

Marc B
Marc B

Reputation: 360662

The .ready() code block is parsed/prepped at the time it's encountered within the page, but actual execution is deferred until the "ready" condition has been met. You can have as many .ready() blocks as you want - they won't hang the page - they're designed NOT to hang the page.

Upvotes: 1

Chris Laplante
Chris Laplante

Reputation: 29658

It's an event handler, and it doesn't wait for everything to download. It only waits until the DOM has been constructed and is ready to be transformed. From the docs:

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.

Code behind it is fairly simple, actually. It just waits for document.body to be accessible (not null):

function (wait) {
    // Either a released hold or an DOMready/load event and not yet ready
    if ((wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady)) {
        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
        if (!document.body) {
            return setTimeout(jQuery.ready, 1);
        }

        // Remember that the DOM is ready
        jQuery.isReady = true;

        // If a normal DOM Ready event fired, decrement, and wait if need be
        if (wait !== true && --jQuery.readyWait > 0) {
            return;
        }

        // If there are functions bound, to execute
        readyList.resolveWith(document, [jQuery]);

        // Trigger any bound ready events
        if (jQuery.fn.trigger) {
            jQuery(document).trigger("ready").unbind("ready");
        }
    }
}

From http://james.padolsey.com/jquery/#v=1.6.2&fn=jQuery.ready

Upvotes: 3

Related Questions