Cum se determină dacă DOM-ul este încărcat?

Utilizați evenimentul DOMContentLoaded.

document.addEventListener('DOMContentLoaded', () => {
  // Cod care va fi executat după încărcarea DOM-ului
});

Alternativ, puteți verifica proprietatea document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    // Cod
  });
} else {
  // DOM-ul este deja încărcat
}

Evenimentul DOMContentLoaded se declanșează după încărcarea și parsarea completă a documentului HTML, dar înainte de încărcarea resurselor externe, cum ar fi stilurile și imaginile.

Pentru a determina încărcarea completă a paginii, inclusiv toate resursele, se folosește evenimentul load:

window.addEventListener('load', () => {
  // Cod care va fi executat după încărcarea completă a paginii
});