Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

L'evento DOMContentLoaded viene attivato quando il documento HTML iniziale è stato caricato e analizzato completamente, senza attendere il completamento del caricamento di fogli di stile, immagini e sottoframe. Un evento molto diverso come load dovrebbe essere usato solo per rilevare una pagina completamente caricata. È un errore incredibilmente popolare da usare load dove DOMContentLoaded sarebbe molto più appropriato, quindi sii cauto.

Note: JavaScript sincrono sospende l'analisi del DOM.

Note: Ci sono anche molte librerie generali standalone che offrono metodi cross-browser per rilevare se il DOM è pronto.

Accelerare il dom

Se vuoi che il DOM venga analizzato il più velocemente possibile dopo che l'utente ha richiesto la pagina, alcune cose che potresti fare è trasformare il tuo JavaScript asincrono e ottimizzare il caricamento dei fogli di stile che, se usati come al solito, rallentano il caricamento della pagina dovuto al caricamento in parallelo, "rubare" il traffico dal documento HTML principale.

Informazioni generali

Specification
HTML5
Interface
Evento
Bubbles
Annullabile
Sì (anche se specificato come un semplice evento che non è cancellabile)
Target
Documento
Azione Predefinita
Nessuna.

Properties

Property Type Description
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 è attivo o no.
cancelable Read only Boolean Se l'evento è cancellabile o meno.

Esempio

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

Compatibilità dei 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!

  
Caratteristica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Supporto di base 1.0[1] (Yes) 1.0 (1.7 or earlier)[1] 9.0[2] 9.0 3.1[1]
  
Caratteristica 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 tentando ripetutamente di eseguire document.documentElement.doScroll("left");, poiché questo snippet genera un errore finché il DOM non è pronto.

Eventi correlati

Tag del documento e collaboratori

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