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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
readyState | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 4 | IE
Full support
9
| Opera
Full support
11
| Safari Full support 5 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android
Full support
11
| Safari iOS Full support 5 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
See also
readystatechange
eventDOMContentLoaded
eventload
event