Αυτό το ιστολόγιο θα δείξει τη διαφορά μεταξύ του window.onload και του document.onload στο JavaScript.
window.onload vs document.onload σε JavaScript
Ο ' window.onload Το συμβάν ενεργοποιείται όταν ολοκληρωθεί η φόρτωση ολόκληρης της σελίδας (συμπεριλαμβανομένων των πόρων της). Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε αυτό το συμβάν για να διασφαλίσετε ότι η σελίδα έχει φορτωθεί πλήρως πριν εκτελέσετε οποιονδήποτε κώδικα που βασίζεται στο περιεχόμενο της σελίδας.
Ο ' document.onload Το συμβάν είναι παρόμοιο με το window.onload, αλλά ενεργοποιείται μόνο όταν ολοκληρωθεί η φόρτωση του DOM του εγγράφου (η δομή του περιεχομένου της σελίδας). Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε αυτό το συμβάν για να διασφαλίσετε ότι το περιεχόμενο της σελίδας είναι πλήρως φορτωμένο και έτοιμο για χειραγώγηση πριν από την εκτέλεση οποιουδήποτε κώδικα.
Ποια είναι η καλύτερη προσέγγιση που πρέπει να ακολουθήσετε;
Γενικά, είναι καλή ιδέα να χρησιμοποιήσετε το document.onload αντί για το window.onload, εάν χρειάζεται μόνο να βεβαιωθείτε ότι το περιεχόμενο της σελίδας έχει φορτωθεί πλήρως πριν εκτελέσετε τον κώδικά σας. Αυτό συμβαίνει επειδή το document.onload θα ενεργοποιείται πιο γρήγορα από ένα window.onload, κάτι που μπορεί να βελτιώσει την απόδοση του κώδικά σας. Ωστόσο, εάν πρέπει να διασφαλίσετε ότι οι πόροι της σελίδας (όπως οι εικόνες και τα φύλλα στυλ) έχουν φορτωθεί πλήρως πριν εκτελέσετε τον κώδικά σας, τότε θα πρέπει να χρησιμοποιήσετε το window.onload.
Πώς να χρησιμοποιήσετε το window.onload έναντι του document.onload σε JavaScript;
Στο συγκεκριμένο παράδειγμα, θα δούμε πώς αυτά τα συμβάντα προσδιορίζουν τη φόρτωση του εγγράφου και τη φόρτωση παραθύρου πριν από την εκτέλεση οποιουδήποτε κώδικα.
Τηλεφώνησε στο ' document.onload ” το συμβάν που σας ενημερώνει ότι το έγγραφο φορτώνεται χρησιμοποιώντας ένα μήνυμα alert():
έγγραφο. σε φορτίο = συναγερμός ( 'document_onload' ) ;Τηλεφώνησε στο ' window.onload ” συμβάν και αντιστοιχίστε το προκύπτον μήνυμα μιας μεθόδου alert() σε αυτό:
παράθυρο. σε φορτίο = συναγερμός ( 'window_onload' ) ;
Όπως μπορείτε να δείτε, όταν η σελίδα ανανεώνεται, φορτώνεται το πρώτο έγγραφο και, στη συνέχεια, ενεργοποιείται η μέθοδος φόρτωσης παραθύρου όταν ολοκληρωθεί η φόρτωση ολόκληρης της σελίδας:
Αυτά αφορούν τα συμβάντα window.onload και document.onload στο JavaScript.
συμπέρασμα
Ο ' window.onload ' και ' document.onload ” είναι δύο συμβάντα JavaScript για να βεβαιωθείτε ότι η πλήρης σελίδα φορτώνει πριν από την εκτέλεση οποιουδήποτε κώδικα. Το document.onload θα ενεργοποιηθεί πιο γρήγορα από το window.onload, κάτι που μπορεί να βελτιώσει την απόδοση του κώδικα. Αυτό το ιστολόγιο έδειξε τη διαφορά μεταξύ window.onload και document.onload σε JavaScript.