Document.readyState

Sumário

Retorna "loading" enquanto document está carregando, "interactive" quando foi carregado porém seus sub-recursos (como imagens, por exemplo) ainda não, e "complete" quando foi totalmente carregado.

Sintaxe

var string = document.readyState;

Valores

O readyState de um documento pode ser um dos seguintes:

loading

O document ainda está carregando.

interactive

O documento terminou de ser carregado e o documento foi analisado, mas sub-recursos, como imagens, folhas de estilo e quadros, ainda estão sendo carregados.

complete

O documento e todos os sub-recursos terminaram de carregar. O estado indica que o load evento está prestes a disparar.

Exemplos

Diferentes estados de readyState

switch (document.readyState) {
  case "loading":
    // O documento esta carregando
    break;
  case "interactive":
    // O documento acabou de carregar. Nós podemos acessar os elementos do DOM.
    // mas sub-recursos, como imagens, folhas de estilo e quadros, ainda estão sendo carregados.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // A pagina carregou por completo.
    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
    break;
}

readystatechange como uma alternativa para DOMContentLoaded evento

// alternativa para DOMContentLoaded evento
document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    initApplication();
  }
}

readystatechange como uma alternativa para load evento

// ternativa para load evento
document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    initApplication();
  }
}

readystatechange como ouvinte de evento para inserir ou modificar o DOM antes de DOMContentLoaded

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

Especificação

• http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness

Veja também

• document.onreadystatechange