Ποιες είναι οι διαφορές μεταξύ της μεθόδου window.onload
της JavaScript και της μεθόδου $(document).ready()
της jQuery;
Το συμβάν ready
λαμβάνει χώρα μετά τη φόρτωση του εγγράφου HTML, ενώ το συμβάν onload
λαμβάνει χώρα αργότερα, όταν έχει επίσης φορτωθεί όλο το περιεχόμενο (π.χ. εικόνες).
Το συμβάν onload
είναι ένα τυπικό συμβάν στο DOM, ενώ το συμβάν ready
είναι ειδικό για την jQuery. Ο σκοπός του συμβάντος ready
είναι ότι θα πρέπει να συμβαίνει όσο το δυνατόν νωρίτερα μετά τη φόρτωση του εγγράφου, έτσι ώστε ο κώδικας που προσθέτει λειτουργικότητα στα στοιχεία της σελίδας να μην χρειάζεται να περιμένει να φορτωθεί όλο το περιεχόμενο.
Το window.onload
είναι το ενσωματωμένο συμβάν της JavaScript, αλλά καθώς η υλοποίησή του είχε αμυδρές ιδιορρυθμίες σε όλα τα προγράμματα περιήγησης (Firefox, Internet Explorer 6, Internet Explorer 8, και Opera), η jQuery παρέχει το document.ready
, το οποίο αφαιρεί αυτά και πυροδοτεί μόλις η σελίδα είναι έτοιμη (δεν περιμένει για εικόνες, κλπ.).
Το $(document).ready
(σημειώστε ότι δεν είναι το document.ready
, το οποίο είναι απροσδιόριστο) είναι μια συνάρτηση της jQuery, η οποία τυλίγει και παρέχει συνέπεια στα ακόλουθα συμβάντα:
document.ondomcontentready
/ document.ondomcontentloaded
- ένα νέο γεγονός που πυροδοτείται όταν φορτώνεται το έγγραφο's DOM (το οποίο μπορεί να είναι κάποιο χρονικό διάστημα πριν φορτωθούν οι εικόνες, κλπ.); και πάλι, ελαφρώς διαφορετικό στον Internet Explorer και στον υπόλοιπο κόσμοwindow.onload
(το οποίο υλοποιείται ακόμη και σε παλαιά προγράμματα περιήγησης), το οποίο πυροδοτείται όταν φορτώνεται ολόκληρη η σελίδα (εικόνες, στυλ κ.λπ.)Μια λέξη προσοχής σχετικά με τη χρήση του $(document).ready()
με τον Internet Explorer. Εάν μια αίτηση HTTP διακοπεί πριν φορτωθεί ολόκληρο το έγγραφο (για παράδειγμα, ενώ μια σελίδα μεταδίδεται στο πρόγραμμα περιήγησης, γίνεται κλικ σε έναν άλλο σύνδεσμο), ο IE θα ενεργοποιήσει το συμβάν $(document).ready
.
Εάν οποιοσδήποτε κώδικας εντός του συμβάντος $(document).ready()
αναφέρεται σε αντικείμενα DOM, υπάρχει η πιθανότητα να μην βρεθούν αυτά τα αντικείμενα και να προκύψουν σφάλματα Javascript. Είτε προστατεύετε τις αναφορές σας σε αυτά τα αντικείμενα, είτε αναβάλλετε τον κώδικα που αναφέρεται σε αυτά τα αντικείμενα στο συμβάν window.load.
Δεν μπόρεσα να αναπαραγάγω αυτό το πρόβλημα σε άλλα προγράμματα περιήγησης (συγκεκριμένα, Chrome και Firefox).