Document.readyState

document.readyState 을 이용하여 document의 로딩시점에 따라 각각 다른 이벤트를 취할 수 있다.

readyState의 값은 loading, interactive, complete 이 있는데,

loading : document가 여전히 로딩중인 상태

interactive : parse는 되었지만 resource들(images, stylesheets)은 아직 로딩인 안된 상태로 dom트리에 접근할 수 있다 

                ( = DOMContentLoaded 와 같은 상태)

complete : 모든게 완료된 상태 (= window.load 와 같은 상태)

var string = document.readyState;

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
    break;
}

참고 : https://developer.mozilla.org/ko/docs/Web/API/Document/readyState