Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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

<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();
}

 

Compatibilidade entre Navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

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.

Eventos Relacionados

Etiquetas do documento e colaboradores

Colaboradores desta página: mdnwebdocs-bot, helton-mori-dev, fscholz, greevin, macalha
Última atualização por: mdnwebdocs-bot,