Document.readyState:
O Document.readyState
tem por objetivo identificar o status de carregamento de um documento. Serve para interagir com a página em determinados estados de carregamento. Ele é usado baseado em eventos de referência notáveis por ferramentas de desempenho e APIs. Essa métrica é relatada pelos navegadores.
Document.readyState
possui três estados possíveis de resposta (loaded, interactive, complete):
loaded:
Informa se um documento está sendo carregado (loaded).
loading:
Estados em tempo de execução do readyState:
Ou seja, quando o document.readyState
tem um status de "loading", significa que o documento (por exemplo um arquivo html do tipo index.html) está sendo analisado e tratado para fornecer um estado.
Outros sub-recursos da página ainda não são um fator, porque o documento inicial está apenas começando a analisar, portanto, o navegador não sabe se eles existem.
O html em si está atualmente baixado (o navegador possui o html), mas está sendo processado...
O carimbo de data / hora da API de sincronização de navegação "domLoading" é acionado imediatamente antes do documento ter um status de carregamento.
interactive:
Quando document.readyState
tem um status "interactive", significa que o documento agora está analisado e carregado, mas sub-recursos como CSS e imagens ainda estão sendo carregados ou analisados. Quando document.readyState
relata que é interativo, também significa que o evento DOMContentLoaded
foi acionado.
Interagindo com o readyState:
Para cada alteração ocorrida em document.readyState (por exemplo, se o readyState mudar de "loading" para "interativo"), um evento readystatechange é acionado no objeto de documento. Usando o evento readystatechange, podemos interagir com essas "alterações".
Exemplo:
// alternativa para carregar o evento
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}
complete:
Quando document.readyState
tem um status "complete", significa que o documento agora é analisado e carregado e todos os sub-recursos de documentos conhecidos, como CSS e imagens, foram analisados e carregados. Quando document.readyState relata que está completo, isso também significa que o evento de carregamento foi acionado.
Em termos humanos:
Document.readyState
nos diz em que estágio está o carregamento da página. É a versão do navegador de "Are we there yet?" (Já chegamos?).
Essas informações podem ser usadas para interagir com a página enquanto ela está em diferentes estágios de carregamento de uma página.
Resumidamente: de maneira geral, você só irá usar o readyState
como uma condicional de estado, para interagir com seu objeto que está sendo renderizado...
Uma forma de capturar todos os eventos possíveis de um determinado evento com o document.readyState
, no caso estou capturando eventos de uma requisição GET por ajax:
function handler() {
console.log(this.readyState)
//0 (não inicializado => uninitialized | esse é antes de qualquer estado, então ele não será impresso aqui dentro, pois ele não passa pelo onreadystatechange)
//1 (a carregar => loading)
//2 (carregado => loaded)
//3 (interactivo => interactive)
//4 (completo => complete)
}
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "https://www.google.com");
client.send();
Curiosidade: Se por exemplo, executar o código acima somente no seu console do navegador, provavelmente o 1
e o 4
somente serão definidos, porque 2
e 3
não são enxergados apenas pelo console.
Browser compatibility
. Porém, já encontrei várias dificuldades em utilizar somente o eventoReadyState
para verificar se uma página foi aberta completamente, não funciona todas as vezes. Sempre precisei adicionar algum tempo de carregamento junto comReadyState