Η έννοια onload HTML/JS μπορεί να σας βοηθήσει να ελέγξετε τη συμπεριφορά της ιστοσελίδας μετά τη φόρτωσή της.

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

Ορισμένες ιστοσελίδες διασφαλίζουν ότι ορισμένες λειτουργίες δεν εμφανίζονται μέχρι να ολοκληρωθεί η φόρτωση όλων. Ένα παράδειγμα περιλαμβάνει την ανάκτηση δεδομένων από μια βάση δεδομένων μόνο μετά τη φόρτωση της σελίδας.

Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να ελέγξετε εάν μια ιστοσελίδα έχει φορτωθεί πλήρως. Μπορείτε να ακούσετε συμβάντα χρησιμοποιώντας προγράμματα χειρισμού συμβάντων JavaScript, χρησιμοποιήστε το window.onload Συμβάν JavaScript ή το σε φορτίο Χαρακτηριστικό HTML.

Τρόπος χρήσης onLoad With the Body HTML Element

Μπορείτε να χρησιμοποιήσετε συμβάντα JavaScript για να ελέγξετε εάν έχει φορτωθεί το σώμα της ιστοσελίδας. Θα χρειαστείτε ένα αρχείο HTML με κάποιο περιεχόμενο σελίδας και ένα αρχείο JavaScript για να εκτελέσετε τον κώδικα.

instagram viewer

Ο κώδικας που χρησιμοποιείται σε αυτό το έργο είναι διαθέσιμος στο α Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.

  1. Σε ένα νέο αρχείο HTML που ονομάζεται index.html, προσθέστε τον ακόλουθο βασικό κώδικα HTML:
    html>
    <html>
    <κεφάλι>
    <τίτλος>Παράδειγμα χρήσης onloadτίτλος>
    κεφάλι>
    <σώμα>
    <h1>Παράδειγμα χρήσης onload()h1>
    <Π>Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε το συμβάν onload() σε JavaScript.Π>
    σώμα>
    html>
  2. Δημιουργήστε ένα νέο αρχείο στον ίδιο φάκελο που ονομάζεται script.js. Συνδέστε αυτό το αρχείο με τη σελίδα HTML χρησιμοποιώντας την ετικέτα script. Μπορείτε να προσθέσετε την ετικέτα σεναρίου στο κάτω μέρος της ετικέτας σώματος:
    <σώμα>
     Το περιεχόμενό σας 
    <γραφήsrc="script.js">γραφή>
    σώμα>
  3. Μέσα στο περιεχόμενο στην ετικέτα σώματος HTML, προσθέστε μια κενή ετικέτα παραγράφου.
    <Πταυτότητα="παραγωγή">Π>
  4. Μέσα στο αρχείο JavaScript, προσθέστε το window.onload λειτουργία εκδήλωσης. Αυτό θα εκτελεστεί όταν φορτωθεί η σελίδα:
    παράθυρο.onload = λειτουργία() {
    // κώδικας για εκτέλεση κατά τη φόρτωση της σελίδας
    };
  5. Μέσα στη συνάρτηση, συμπληρώστε το περιεχόμενο της άδειας ετικέτας παραγράφου. Αυτό θα αλλάξει την ετικέτα παραγράφου ώστε να εμφανίζεται ένα μήνυμα μόνο όταν έχει φορτωθεί η σελίδα:
    έγγραφο.getElementById("παραγωγή").innerHTML = "Η σελίδα φορτώθηκε!";
  6. Εναλλακτικά, μπορείτε επίσης χρησιμοποιήστε ένα πρόγραμμα ακρόασης συμβάντων να ακούσω για το DOMContentLoaded Εκδήλωση. DOMContentLoaded ενεργοποιείται νωρίτερα από το window.onload. Ενεργοποιείται μόλις το έγγραφο HTML είναι έτοιμο, αντί να περιμένει τη φόρτωση όλων των εξωτερικών πόρων.
    έγγραφο.addEventListener("DOMContentLoaded", λειτουργία() {
    έγγραφο.getElementById("παραγωγή").innerHTML = "Η σελίδα φορτώθηκε!";
    });
  7. Ανοίξτε το αρχείο index.html σε ένα πρόγραμμα περιήγησης ιστού, για να δείτε το μήνυμα όταν ολοκληρωθεί η φόρτωση της σελίδας:
  8. Αντί να χρησιμοποιείτε συμβάντα JavaScript για να ελέγξετε αν έχει φορτωθεί μια σελίδα, μπορείτε επίσης να χρησιμοποιήσετε το σε φορτίο Χαρακτηριστικό HTML για το ίδιο αποτέλεσμα. Προσθέστε το χαρακτηριστικό onload στην ετικέτα σώματος στο αρχείο HTML:
    <σώμασε φορτίο="μέσα σε αυτό()">
  9. Δημιουργήστε το μέσα σε αυτό() λειτουργία μέσα στο αρχείο JavaScript. Δεν συνιστάται να χρησιμοποιείτε ταυτόχρονα το χαρακτηριστικό onload HTML και το συμβάν onload JavaScript. Κάτι τέτοιο θα μπορούσε να οδηγήσει σε απροσδόκητη συμπεριφορά ή συγκρούσεις μεταξύ των δύο λειτουργιών.
    λειτουργίαμέσα σε αυτό() {
    έγγραφο.getElementById("παραγωγή").innerHTML = "Η σελίδα φορτώθηκε!";
    }

Συνιστούμε να χρησιμοποιήσετε τα προγράμματα ακρόασης συμβάντων JavaScript και το window.onload μέθοδος πάνω από το HTML σε φορτίο επειδή είναι καλή πρακτική η διατήρηση της συμπεριφοράς και του περιεχομένου της ιστοσελίδας ξεχωριστά. Επίσης, τα προγράμματα ακρόασης συμβάντων JavaScript παρέχουν μεγαλύτερη συμβατότητα και ευελιξία σε σχέση με τις άλλες δύο μεθόδους.

Τρόπος χρήσης onLoad με το στοιχείο HTML εικόνας

Μπορείτε επίσης να χρησιμοποιήσετε το συμβάν onload για να εκτελέσετε κώδικα όταν φορτώνονται άλλα στοιχεία στη σελίδα. Ένα παράδειγμα αυτού είναι το στοιχείο εικόνας.

  1. Μέσα στον ίδιο φάκελο με το αρχείο index.html, προσθέστε οποιαδήποτε εικόνα.
  2. Μέσα στο αρχείο HTML, προσθέστε μια ετικέτα εικόνας και συνδέστε το χαρακτηριστικό src με το όνομα της εικόνας που είναι αποθηκευμένη στο φάκελο.
    <imgταυτότητα="Η εικόνα μου"src="Pidgeymon.png"πλάτος="300">
  3. Προσθέστε μια άλλη κενή ετικέτα παραγράφου για να εμφανίσετε ένα μήνυμα κατά τη φόρτωση της εικόνας:
    <Πταυτότητα="imageLoadedMessage">Π>
  4. Μέσα στο αρχείο JavaScript, προσθέστε ένα συμβάν onload στην εικόνα. Χρησιμοποιήστε το μοναδικό αναγνωριστικό η εικόνα μου για να προσδιορίσετε σε ποιο στοιχείο εικόνας θα προσθέσετε το συμβάν onload:
    var εικόνα μου = έγγραφο.getElementById("Η εικόνα μου");
    myImage.onload = λειτουργία() {

    };
  5. Μέσα στο συμβάν onload, αλλάξτε το εσωτερικό HTML για να το προσθέσετε Η εικόνα φορτώθηκε μήνυμα:
    έγγραφο.getElementById("imageLoadedMessage").innerHTML = "Η εικόνα φορτώθηκε!";
  6. Αντί να χρησιμοποιείτε myImage.onload, μπορείτε επίσης να χρησιμοποιήσετε ένα πρόγραμμα ακρόασης συμβάντων για να ακούσετε το φορτώνω Συμβάν JavaScript:
    myImage.addEventListener('φορτώνω', λειτουργία() {
    έγγραφο.getElementById("imageLoadedMessage").innerHTML = "Η εικόνα φορτώθηκε!";
    });
  7. Ανοίξτε το index.html σε ένα πρόγραμμα περιήγησης ιστού για να προβάλετε την εικόνα και το μήνυμα:
  8. Για το ίδιο αποτέλεσμα, μπορείτε επίσης να χρησιμοποιήσετε το χαρακτηριστικό onload HTML. Παρόμοια με την ετικέτα body, προσθέστε ένα χαρακτηριστικό onload στην ετικέτα img:
    <imgταυτότητα="Η εικόνα μου"src="Pidgeymon.png"πλάτος="300"σε φορτίο="imageLoaded()">
  9. Προσθέστε τη συνάρτηση στο αρχείο JavaScript, για να εκτελέσετε τον κώδικα όταν φορτωθεί η εικόνα:
    λειτουργίαΗ εικόνα έχει φορτωθεί() {
    έγγραφο.getElementById("imageLoadedMessage").innerHTML = "Η εικόνα φορτώθηκε!";
    }

Πώς να χρησιμοποιήσετε το onLoad κατά τη φόρτωση της JavaScript

Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό HTML onload για να ελέγξετε εάν το πρόγραμμα περιήγησης έχει ολοκληρώσει τη φόρτωση του αρχείου JavaScript. Δεν υπάρχει ισοδύναμο συμβάν φόρτωσης JavaScript για την ετικέτα σεναρίου.

  1. Προσθέστε το χαρακτηριστικό onload στην ετικέτα script στο αρχείο HTML σας.
    <γραφήsrc="script.js"σε φορτίο="LoadedJs()">γραφή>
  2. Προσθέστε τη συνάρτηση στο αρχείο JavaScript. Εκτυπώστε ένα μήνυμα από σύνδεση στην κονσόλα του προγράμματος περιήγησης:
    λειτουργίαLoadedJs() {
    κονσόλα.κούτσουρο("JS Φορτώθηκε από το πρόγραμμα περιήγησης!");
    }
  3. Ανοίξτε το αρχείο index.html στο πρόγραμμα περιήγησης. Μπορείς χρησιμοποιήστε το Chrome DevTools για να δείτε τυχόν μηνύματα που εξάγονται στην κονσόλα.

Φόρτωση ιστοσελίδων στο πρόγραμμα περιήγησης

Τώρα μπορείτε να χρησιμοποιήσετε συναρτήσεις και συμβάντα για να εκτελέσετε συγκεκριμένο κώδικα όταν ολοκληρωθεί η φόρτωση μιας ιστοσελίδας. Η φόρτωση σελίδων είναι ένας μεγάλος παράγοντας για τη δημιουργία μιας ομαλής και απρόσκοπτης εμπειρίας χρήστη.

Μπορείτε να μάθετε περισσότερα για το πώς μπορείτε να ενσωματώσετε πιο ενδιαφέροντα σχέδια σελίδων φόρτωσης στον ιστότοπό σας.