DOMContentLoaded

DOMContentLoaded.js

document.addEventListener("DOMContentLoaded", ()=>{
  init()
})
function init(){}

// альтернатива событию DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    init()
  }
}

document.onreadystatechange = function () {
  switch (document.readyState) {
    case "loading":
      // Страница все ещё загружается
      break;
    case "interactive":
      // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам.
      var span = document.createElement("span");
      span.textContent = "A  element.";
      document.body.appendChild(span);
      break;
    case "complete":
      // Страница загружена вместе с дополнительными ресурсами.
      console.log(
        "The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText,
      );
      break;
  }
}

  window.addEventListener("load", function (event) {
    console.log("All resources finished loading!");
  });

document.addEventListener("readystatechange", (event) => {
  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});