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.

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.

O evento readystatechange é acionado no objeto document quando esse valor é alterado.

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 unsupported templ: event 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

Veja também