Come determinare se il DOM è caricato?

Utilizzare l'evento DOMContentLoaded.

document.addEventListener('DOMContentLoaded', () => {
  // Codice da eseguire dopo il caricamento del DOM
});

In alternativa, è possibile verificare la proprietà document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    // Codice
  });
} else {
  // DOM già caricato
}

L'evento DOMContentLoaded viene attivato dopo che il documento HTML è stato completamente caricato e analizzato, ma prima del caricamento di risorse esterne come stili e immagini.

Per determinare il caricamento completo della pagina, inclusi tutte le risorse, si utilizza l'evento load:

window.addEventListener('load', () => {
  // Codice da eseguire dopo il caricamento completo della pagina
});