DOMContentLoaded

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.

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: HTML5
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

html

<script>
  document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM completamente carregado e analisado");
  });
</script>

Forçando o atraso do DOMContentLoaded

html

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