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

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