Question

$(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?

Answer 1

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