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\');
         


        

Answer 1

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