[Javascript] readyState란? (feat. DOMContentLoaded)

 

 

 

[개념]

document.readyState는 도큐먼트의 로딩 상태를 구독할 수 있는 속성이다. 이 속성이 변경될 때 readyStatechange에서 이벤트가 발생된다. DOMContentLoaded의 대안으로 사용된다.

 

 

 

[속성]

• loading
• interactive: 도큐먼트의 로드가 완료되고 구문 분석은 완료 되었지만 서브 리소스(스크립트, 이미지, 스타일시트, 프레임)은 여전히 로딩 중이다. 상태는 DOMContentLoaded 이벤트가 곧 실행될 것임을 의미한다.
• complete: 로드가 완료되었고 *로드(load) 이벤트가 곧 실행될 것임을 나타낸다.

* 로드 이벤트(🔗MDN): DOMContentLoaded와 대조되는 이벤트로, 리소스 로드가 완료될 때까지 기다리지 않고 페이지 DOM이 로드되자마자 실행된다.

 

 

 

 

[readyState 사용 방식]

1. switch문 사용하기

switch (document.readyState) {
  case "loading":
    break;
  case "interactive": {
    const span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  }
  case "complete":
    console.log(
      `The first CSS rule is: ${document.styleSheets[0].cssRules[0].cssText}`,
    );
    break;
}

 

 

2. 이벤트 리스너로 달기

DOMContentLoaded 전에 DOM을 삽입하거나 수정하기 위한 이벤트 리스너이다.

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    initLoader();
  } else if (event.target.readyState === "complete") {
    initApp();
  }
});

 

 

3. 일반적 선언

document.onreadystatechange = () => {
  if (document.readyState === "complete") {
    initApplication();
  }
};

 

 

 

 

 

---

출처

Document: readyState property - Web APIs | MDN