Document loading order of events

by luciopaiva

JavaScript

function log(msg) {
    const div = document.createElement("div");
    div.innerText = msg;
    document.body.appendChild(div);
}

function handleStateChange() {
	log(document.readyState);
    
    if (document.readyState === "interactive") {
        // to prove that there's still time to schedule our listener after "interactive"
        window.addEventListener("DOMContentLoaded", () => log("DOMContentLoaded"));
    } else if (document.readyState === "complete") {
        window.addEventListener("load", () => log("load"));
    }
}

document.addEventListener("readystatechange", handleStateChange);

log(document.readyState);