Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
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 |
Whether the event normally bubbles or not. |
cancelable Somente leitura |
Boolean |
Whether the event is cancellable or not. |
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>
Compatibilidade entre Navegadores
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 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.