Document: DOMContentLoaded event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
DOMContentLoaded may fire before your script has a chance to run, so it is wise to check before adding a listener.
js
function doSomething() {
console.info("DOM loaded");
}
if (document.readyState === "loading") {
// Loading hasn't finished yet
document.addEventListener("DOMContentLoaded", doSomething);
} else {
// `DOMContentLoaded` has already fired
doSomething();
}
Note:
There's no race condition here — it's not possible for the document to be loaded between the if check and the addEventListener() call. JavaScript has run-to-completion semantics, which means if the document is loading at one particular tick of the event loop, it can't become loaded until the next cycle, at which time the doSomething handler is already attached and will be fired.