DOMContentLoaded
O evento DOMContentLoaded
é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - load
- deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem load
quando DOMContentLoaded
seria muito mais apropriado.
Nota: Javascript Síncrono pausa a análise do DOM.
Acelerando
Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.
Informações gerais
- Especificação
- Interface
-
Event
- Propaga
-
Sim
- Cancelável
-
Sim (embora especificado como evento simples não-cancelável)
- Alvo
-
Document
- Ação Default
-
Nenhuma.
Propriedades
Property | Type | Description |
---|---|---|
target Somente leitura |
EventTarget |
Alvo do evento (O topo do DOM). |
type Somente leitura |
DOMString |
Tipo de evento |
bubbles Somente leitura |
Boolean |
O evento é por padrão bubbles ou não. |
cancelable Somente leitura |
Boolean |
O evento pode ser cancelado ou não. |
Exemplo
Básico
<script>
document.addEventListener("DOMContentLoaded", function (event) {
console.log("DOM completamente carregado e analisado");
});
</script>
Forçando o atraso do DOMContentLoaded
<script>
document.addEventListener("DOMContentLoaded", function (event) {
console.log("DOM completamente carregado e analisado");
});
for (var i = 0; i < 1000000000; i++) {} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
</script>
Verificando se o carregamento está completo
DOMContentLoaded
pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.
function doSomething() { console.info("DOM carregado"); } if (document.readyState === "loading") { // Ainda carregando document.addEventListener("DOMContentLoaded", doSomething); } else { // `DOMContentLoaded` foi disparado doSomething(); }
Especificações
Specification |
---|
HTML Standard # stop-parsing |
Compatibilidade com navegadores
BCD tables only load in the browser
Eventos Relacionados
unsupported templ: eventunsupported templ: eventunsupported templ: eventunsupported templ: eventunsupported templ: event