Question

I want to disable some specific “feature” that one my plugins does to the DOM when the DOM is ready.

If I put my code inside the onload callback, will it always get executed after the ready callback?

I want to be sure in 100% that even if there aren’t any images of just few the ready will be executed before the onload.

Answer 1

While I think @jAndy’s answer is right, you can afford yourself some extra assurance by also placing the code in the onload within a ready() call.

Just make sure that your main ready() call comes first.

$(document).ready(function() {
    // Your normal ready handler
});

$(window).load(function() {
    // Placing code in another .ready() call in here will add it to the
    //    end of internal Array of ready handlers if any are pending
    $(document).ready(function() {
        // my onload code
    });
});

So if the ready() has already fired by the time the onload fires, your onload code will still run. (An internal flag is set once the DOM is ready, so future .ready() calls are immediately invoked.)

If the .ready() has somehow not fired when the onload happens, that will mean that your original ready() code is first in the internal Array, and the new .ready() code will be added to the end of the Array.

---

EDIT:

Looking at the source for the main jQuery.ready handler that is fired when the DOM is ready (which in turn, fires the list of the user’s .ready() handlers), it appears as though there’s an IE bug where the handler fires a little early.

To remedy this bug, jQuery makes the handler asynchronously invoked until it can actually see document.body.

ready: 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.fireWith(document, [jQuery]);

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

It would seem that because of this asynchronous looping of the handler, then IE would at least be possibly prone to having the window.onload handler invoked before the .ready() handlers.

Adding to the .ready() handler list within the onload as I described above should remedy this.