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 julho de 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
documentainda 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
loadevento 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();
}
});