DOMContentLoaded

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

Proprietà

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

Compatibilità con i browser

[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

• Eventi correlati
  • beforeunload
  • load
  • readystatechange
  • unload