DOMContentLoaded

O evento DOMContentLoaded é acionado quando o documento inicial HTML foi completamente carregado e analisado, sem aguardar por folhas de estilo, 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 incrivelmente popular as pessoas utilizarem load quando DOMContentLoaded seria muito mais apropriado, então seja cauteloso.

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 o usuário haver requisitado a página, você deve habilitar seu javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso não seja feito, farão a página ser carregada mais lentamente por serem carregados em paralelo, "roubando" tráfego do documento HTML principal.

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`	The event target (the topmost target in the DOM tree).
`type` Somente leitura	`DOMString`	The type of event.
`bubbles` Somente leitura	`boolean`	Does the event normally bubble?
`cancelable` Somente leitura	`boolean`	Is it possible to cancel the event?

Exemplo

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

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

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Suporte básico	0.2	1.0 (1.7 or earlier)	9.0	9.0	3.1

Característica	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Suporte básico	(Yes)	1.0 (1)	?	(Yes)	(Yes)

Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.

Cross-browser fallback

O Internet Explorer 8 suporta o evento readystatechange, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar document.documentElement.doScroll("left"); repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.

Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.