L'evento DOMContentLoaded si attiva quando il documento HTML iniziale è stato completamente caricato e analizzato, senza attendere il completamento del caricamento di fogli di stile, immagini e sottoframe.

Un evento diverso, load, dovrebbe essere usato solo per rilevare una pagina completamente caricata. È un errore molto comune usare  load dove DOMContentLoaded sarebbe molto più appropriato, quindi sii cauto.

Ottimizza la velocità di analisi

JavaScript sincrono sospende l'analisi del DOM. Se vuoi che il DOM venga analizzato il più velocemente possibile dopo che l'utente ha richiesto la pagina, puoi rendere il tuo JavaScript asincrono e ottimizzare il caricamento dei fogli di stile. Se caricati come al solito, i fogli di stile rallentano l'analisi del DOM mentre vengono caricati in parallelo, "rubando" il traffico dal documento HTML principale.

Info generali

Interface Event
Bubbles
Cancelable Sì (anche se specificato come un semplice evento che non è cancellabile)
Target Document
Default Action Nessuna

Proprietà

Proprietà Tipo Descrizione
target Read only EventTarget Il target dell'evento (l'obiettivo più in alto nell'albero DOM).
type Read only DOMString Il tipo di evento.
bubbles Read only Boolean Se l'evento normalmente bolle o no.
cancelable Read only Boolean Se l'evento è cancellabile o meno.

Esempi

Uso di base

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

Ritardare DOMContentLoaded

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

for(var i=0; i<1000000000; i++)
{} // Questo script sincrono ritarderà l'analisi del DOM,
   // quindi l'evento DOMContentLoaded verrà avviato in seguito.
</script>

Verifica se il caricamento è già completo

DOMContentLoaded può attivarsi prima che il tuo script abbia la possibilità di essere eseguito, quindi è consigliabile controllare prima di aggiungere un listener.

function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {  // Il caricamento non è ancora finito
  document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` è già stato attivato
  doSomething();
}

Specifiche

Specifica Stato Commento
HTML Living Standard
The definition of 'DOMContentLoaded' in that specification.
Living Standard  
HTML5
The definition of 'DOMContentLoaded' in that specification.
Recommendation  

Compatibilità con i browser

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!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] (Yes) 1.0 (1.7 or earlier)[1] 9.0[2] 9.0 3.1[1]
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)[1] (Yes) 1.0 (1)[1] ?[2] (Yes) (Yes)[1]

[1] Bubbling per questo evento è supportato almeno da Gecko 1.9.2, Chrome 6 e Safari 4.

[2] Internet Explorer 8 supporta l'evento  readystatechange che può essere utilizzato per rilevare quando il DOM è pronto. Nelle versioni precedenti di Internet Explorer, questo stato può essere rilevato provando ripetutamente ad eseguire document.documentElement.doScroll("left");, poiché questo snippet genera un errore finché il DOM non è pronto.

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev, bolste
Ultima modifica di: IsibisiDev,