Document.readyState 자바스크립트

Document.readyState

document의 로딩 상태를 확인 할 수 있다.

Document.readyState의 속성 값이 변경 되면 이벤트가 일어난다.

 

Syntax

var string = document.readyState;

 

radyState 상태

• uninitialized -  아직 로딩 시작 되지 않음
• loading - document 로딩 중
• interactive - 문서의 로딩은 끝나고 해석 중 이지만 images, stylesheets, frames와 같은 하위 자원들은 로딩되고 있는 상태
• complete - 문서와 모든 하위 자원들의 로드가 완료된 상태 ( load 이벤트가 발생되기 직전의 상태)

 

사용 방법

switch (document.readyState) {
  case "loading":
    // 문서가 loading 중일 경우 발생 이벤트 작성
    break;
  case "interactive":
    // 문서가 interactive 중일 경우 발생 이벤트 작성
    break;
  case "complete":
    // 문서가 complete 상태일 경우 발생 이벤트 작성
    break;
}

 

if문 사용 예시

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === 'interactive') { //interactive 상태일 경우
    initLoader(); //initLoader 함수 호출
  }
  else if (event.target.readyState === 'complete') { //complete 상태일 경우
    initApp(); // initApp 함수 호출
  }
});

 

 

 

 

 

출처 : https://developer.mozilla.org/ko/docs/Web/API/Document/readyState