Document.readyState

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Resumen

La propiedad Document.readyState de un document describe el estado de carga del documento.

Valores

El readyState de un documento puede tener uno de los siguientes valores:

loading

El document todavía esta cargando.

interactive

El documento ha terminado de cargar y ha sido analizado pero los sub-recursos como imágenes, estilos y frames aún siguen cargando. El estado indica que el evento DOMContentLoaded ha sido disparado.

complete

El documento y todos los sub-recursos han cargado completamente. El estado indica que el evento load ha sido disparado.

Cuando el valor de esta propiedad cambia, un evento readystatechange se dispara en el objecto document.

Sintaxis

js
var string = document.readyState;

Ejemplos

Diferentes estados del readyState

js
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.
    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 como alternativa al evento DOMContentLoaded

js
// alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
};

readystatechange como alternativa al evento load

js
// alternative to load event
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
};

Especificaciones

Specification
HTML
# current-document-readiness

Compatibilidad del Navegador

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
readyState

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Ver también