JavaScript on page load: “DOMContentLoaded” ή “Load”; Ποιο είναι το σωστό για την κάθε περίπτωση

Καταθέτω τις σημειώσεις μου για το σχετικό θέμα, με την ελπίδα να βοηθήσω όσους έχουν προβληματισμό σχετικά με το ερώτημα: “Πως να τρέξω JavaScript κώδικα ΕΦΟΣΟΝ έχει φορτωθεί η ιστοσελίδα;“

Αν εντοπίσεις λάθη στα γραφόμενα,
αναμένω το email σου με τις σχετικές υποδείξεις.

“onLoad”

Τις περισσότερες φορές στις σχετικές αναζητήσεις για το παραπάνω ερώτημα, η απάντηση είναι ο παρακάτω κώδικας:

window.onload = function () {
    // ...
};

ή ο ισοδύναμος:

window.addEventListener("load", function(){
    // ...
});

Ας δούμε γιατί στις περισσότερες περιπτώσεις είναι λάθος να το χρησιμοποιούμε.

Σύμφωνα με το MDN Web Docs – Load event “The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.”

Σε απλά Ελληνικά, ο κώδικάς μας θα τρέξει μόνο εφόσον φορτωθούν ολοκληρωτικά όλα τα resources και όλες οι εικόνες! Πολύ σπάνια χρειαζόμαστε κάτι τέτοιο, και πρέπει να το έχουμε υπόψη μας εάν δεν θέλουμε να φορτωθούν πρώτα πιθανόν βαριές εικόνες και μετά να τρέξει ο JavaScript κώδικάς μας.

“DOMContentLoaded”

Αντίθετα, σύμφωνα πάλι με το MDN Web Docs – DOMContentLoaded event, ο παρακάτω κώδικας:

document.addEventListener("DOMContentLoaded", function () {
    // ...
});

θα είναι αυτός που τις περισσότερες φορές έχουμε ανάγκη.

Ο κώδικας σε αυτή την περίπτωση, θα τρέξει μόνο όταν “the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading”.

Δηλαδή, θα αναμένουμε να φορτωθεί η σελίδα αλλά χωρίς να περιμένουμε την ολοκληρωτική φόρτωση των εικόνων ή άλλων resources.