Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
Można także przeczytać artykuł w języku: English (US).

The Document.readyState property of a document describes the loading state of the document.

When the value of this property changes, a readystatechange event fires on the document object.

Syntax

var string = document.readyState;

Values

The readyState of a document can be one of following:

loading
The document is still loading.
interactive
The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
complete
The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

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();
  }
});

Specification

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox 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 YesEdge Mobile 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

Autorzy i etykiety dokumentu

Ostatnia aktualizacja: mfluehr,