Πώς να προσδιορίσετε αν το DOM έχει φορτωθεί;

Χρησιμοποιήστε το γεγονός DOMContentLoaded.

document.addEventListener('DOMContentLoaded', () => {
  // Κώδικας που θα εκτελεστεί μετά τη φόρτωση του DOM
});

Εναλλακτικά, μπορείτε να ελέγξετε την ιδιότητα document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    // Κώδικας
  });
} else {
  // Το DOM έχει ήδη φορτωθεί
}

Το γεγονός DOMContentLoaded ενεργοποιείται μετά το πλήρες φόρτωμα και την ανάλυση του HTML εγγράφου, αλλά πριν από τη φόρτωση εξωτερικών πόρων όπως στυλ και εικόνες.

Για να προσδιορίσετε την πλήρη φόρτωση της σελίδας, συμπεριλαμβανομένων όλων των πόρων, χρησιμοποιείται το γεγονός load:

window.addEventListener('load', () => {
  // Κώδικας που θα εκτελεστεί μετά το πλήρες φόρτωμα της σελίδας
});