Async-loaded scripts with DOMContentLoaded or load event handlers not being called?

Question

I've got a script with a DOMContentLoaded event handler—

document.addEventListener('DOMContentLoaded', function() {
    console.log('Hi');
});

Which I'm loading asynchronously—

<script async src=script.js></script>

However, the event handler is never called. If I load it synchronously—

<script src=script.js></script>

It works fine.

(Even if I change the DOMContentLoaded event to a load event, it's never called.)

What gives? The event handler should be registered irrespective of how the script is loaded by the browser, no?

Edit: It doesn't work on Chrome 18.0.1025.11 beta but, with DOMContentLoaded, it does on Firefox 11 beta (but with load it doesn't). Go figure.

OH GREAT LORDS OF JAVASCRIPT AND THE DOM, PRAY SHOW THE ERROR OF MY WAYS!

Answer 1

By loading the script asynchronously, you are telling the browser that it can load that script independently of the other parts of the page. That means that the page may finish loading and may fire DOMContentLoaded BEFORE your script is loaded and before it registers for the event. If that happens, you will miss the event (it's already happened when you register for it).

In all modern browsers, you can test the document to see if it's already loaded (MDN doc), you can check:

if (document.readyState !== "loading")

to see if the document is already loaded. If it is, just do your business. If it's not, then install your event listener.

In fact, as a reference source and implementation idea, jQuery does this very same thing with it's .ready() method and it looks widely supported. jQuery has this code when .ready() is called that first checks to see if the document is already loaded. If so, it calls the ready function immediately rather than binding the event listener:

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

Answer 2

This is not the final answer but made me understand why is not correct using async with a script that need to modify DOM, so must wait to DOMContentLoaded event. Hope could be beneficial.

(Source: Running Your Code at the Right Time from kirupa.com)

Answer 3

Most vanilla JS Ready functions do NOT consider the scenario where the DOMContentLoaded handler is initiated after the document already has loaded - Which means the function will never run. This can happen if you use DOMContentLoaded within an async external script (<script async src="file.js"></script>).

The code below checks for DOMContentLoaded only if the document's readyState isn't already interactive or complete.

var DOMReady = function(callback) {
  document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
};
DOMReady(function() {
  //DOM ready!
});

If you want to support IE aswell:

var DOMReady = function(callback) {
    if (document.readyState === "interactive" || document.readyState === "complete") {
        callback();
    } else if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", callback);
    } else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", function() {
            if (document.readyState != "loading") {
                callback();
            }
        });
    }
};

DOMReady(function() {
  // DOM ready!
});

Answer 4

One way around this is to use the load event on the window object.

This will happen later than DOMContentLoaded, but at least you don't have to worry about missing the event.

window.addEventListener("load", function () {
   console.log('window loaded');
});

If you really need to catch DOMContentLoaded event you can do use Promise object. Promise will get resolved even if it happened earlier:

HTMLDocument.prototype.ready = new Promise(function (resolve) {
if (document.readyState != "loading")
    return resolve();
else
    document.addEventListener("DOMContentLoaded", function () {
        return resolve();
    });
});

document.ready.then(function () {
    console.log("document ready");
});