Question

I have replaced window.addEventListener('DOMContentLoaded', function() {}); with jQuery’s $(document).bind('ready', function() {});, because first one failed to work on IE < 9 and I did not wanted to play with .attachEvent() for that dummy browser, if I could have this nicely covered by jQuery itself.

Shortly after replacement, I noticed that DOMContentLoaded event was always fired around 0-2 miliseconds after page load / refresh (at least this is what was logged by my logging script), while .ready() always requires at least 15-20 miliseconds, after page refresh, to be fired (again – as logged by script).

I’m asking purely for feeding my curiosity, why there is such “significant” delay? Of course, there is no problem for me, that jQuery is firing that event later. It is just, that because I want to know ALL the answers (and rule the world! :]), I can’t sleep with that! :]

EDIT: in .ready() function doc some user (Nick (of Nexxar)) points out that: “jQuery simulates the non existing “DOMContentLoaded” event on IE, but the used mechanism fires much later than the event used on other browsers“. Maybe this is the same, I’m asking for?

Answer 1

Assuming browser that supports the event:

1. The real event can support any document. jQuery will only use the document it was loaded in, no matter what you pass to it.
2. jQuery will fire the event asynchronously even if the event has already happened. Attaching 'DOMContentLoaded' event will do nothing if the event has already happened.

There is no delay in these browsers, see http://jsfiddle.net/rqTAX/3/ (the offsets logged are in milliseconds).

For browsers that don’t support the event, jQuery’s will obviously work for them as well. It will use a hacky mechanism that is not the same as the real DOMContentLoaded and will not necessarily fire as soon as the real DOMContentLoaded would:

// The DOM ready check for Internet Explorer
function doScrollCheck() {
    if ( jQuery.isReady ) {
        return;
    }

    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch(e) {
        setTimeout( doScrollCheck, 1 );
        return;
    }

    // and execute any waiting functions
    jQuery.ready();
}