Hoe bepaal je of de DOM geladen is?

Gebruik het DOMContentLoaded-evenement.

document.addEventListener('DOMContentLoaded', () => {
  // Code die wordt uitgevoerd na het laden van de DOM
});

Alternatief kunt u de eigenschap document.readyState controleren:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    // Code
  });
} else {
  // DOM is al geladen
}

Het DOMContentLoaded-evenement wordt geactiveerd nadat het HTML-document volledig is geladen en geparseerd, maar vóór het laden van externe bronnen zoals stijlen en afbeeldingen.

Om het volledige laden van de pagina, inclusief alle bronnen, te bepalen, wordt het load-evenement gebruikt:

window.addEventListener('load', () => {
  // Code die wordt uitgevoerd na volledige pagina-lading
});