Document.readyState

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

Document.readyState 속성을 통해  document의 로딩 상태를 확인할 수 있다.

Document.readyState 속성 값이 바뀔 때 readystatechange 이벤트가 document에서 일어난다.

Syntax

var string = document.readyState;

Values

document의 readyState 상태는 아래 3가지가 될 수 있다.

loading
 document 로딩 중.
interactive
문서의 로딩은 끝이 나고 해석 중 이지만  images, stylesheets, frames과 같은 하위 자원들은 로딩되고 있는 상태이다.
complete
문서와 모든 하위 자원들의 로드가 완료된 상태이다. 이 상태는 load  이벤트가 발생되기 직전 상태이다.

Examples

Different states of readiness

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.
    // But sub-resources such as images, stylesheets and frames are still loading.
    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;
}

readystatechange as an alternative to DOMContentLoaded event

// Alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    initApplication();
  }
}

readystatechange as an alternative to load event

// Alternative to load event
document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    initApplication();
  }
}

readystatechange as event listener to insert or modify the DOM before DOMContentLoaded

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

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'Document readiness' in that specification.
Living Standard
HTML 5.1
The definition of 'Document readiness' in that specification.
Recommendation
HTML5
The definition of 'Document readiness' in that specification.
Recommendation Initial specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
readyStateChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9
Notes
Full support 9
Notes
Notes Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.
Full support 8
Notes
Notes Only supports 'complete'.
Opera Full support 11
Notes
Full support 11
Notes
Notes Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11
Notes
Full support 11
Notes
Notes Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
Safari iOS Full support 5Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also