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.
Accellerare 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
- Sì
- 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 |
Whether the event normally bubbles or not. |
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 for this event is supported by at least Gecko 1.9.2, Chrome 6, and 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.