Das HTML/JS-Onload-Konzept kann Ihnen dabei helfen, das Verhalten der Webseite nach dem Laden zu steuern.

Das Laden einer Webseite umfasst das Warten darauf, dass der Seiteninhalt, die Bilder und andere Ressourcen vollständig geladen sind.

Einige Webseiten stellen sicher, dass bestimmte Funktionen erst ausgeführt werden, wenn alles vollständig geladen ist. Ein Beispiel ist das Abrufen von Daten aus einer Datenbank erst nach dem Laden der Seite.

Es gibt verschiedene Möglichkeiten, um zu überprüfen, ob eine Webseite vollständig geladen ist. Sie können Ereignisse mit JavaScript-Ereignishandlern abhören, verwenden Sie die window.onload JavaScript-Ereignis oder das laden HTML-Attribut.

So verwenden Sie onLoad mit dem Body-HTML-Element

Sie können JavaScript-Ereignisse verwenden, um zu überprüfen, ob der Text der Webseite geladen wurde. Sie benötigen eine HTML-Datei mit einigen Seiteninhalten und eine JavaScript-Datei, um den Code auszuführen.

Der in diesem Projekt verwendete Code ist in a GitHub-Repository und steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.

instagram viewer
  1. In einer neuen HTML-Datei namens index.html, fügen Sie den folgenden grundlegenden HTML-Code hinzu:
    html>
    <html>
    <Kopf>
    <Titel>Beispiel mit onloadTitel>
    Kopf>
    <Körper>
    <h1>Beispiel mit onload()h1>
    <P>Dieses Beispiel demonstriert die Verwendung des onload()-Ereignisses in JavaScript.P>
    Körper>
    html>
  2. Erstellen Sie eine neue Datei im selben Ordner mit dem Namen script.js. Verknüpfen Sie diese Datei mit dem script-Tag mit Ihrer HTML-Seite. Sie können das Skript-Tag am Ende des Body-Tags hinzufügen:
    <Körper>
     Ihre Inhalte 
    <SkriptQuelle="script.js">Skript>
    Körper>
  3. Fügen Sie innerhalb des Inhalts in Ihrem HTML-Body-Tag ein leeres Absatz-Tag hinzu.
    <PAusweis="Ausgang">P>
  4. Fügen Sie in der JavaScript-Datei die window.onload Event-Funktion. Dies wird ausgeführt, wenn die Seite geladen wurde:
    Fenster.onload = Funktion() {
    // Code, der ausgeführt wird, wenn die Seite geladen wird
    };
  5. Füllen Sie innerhalb der Funktion den Inhalt des leeren Absatz-Tags aus. Dadurch wird das Absatz-Tag so geändert, dass nur dann eine Nachricht angezeigt wird, wenn die Seite geladen wurde:
    dokumentieren.getElementById("Ausgang").innerHTML = "Seite geladen!";
  6. Alternativ können Sie auch Verwenden Sie einen Ereignis-Listener auf die zu hören DOMContentLoaded Fall. DOMContentLoaded löst früher aus als window.onload. Es wird ausgelöst, sobald das HTML-Dokument fertig ist, anstatt darauf zu warten, dass alle externen Ressourcen geladen werden.
    dokumentieren.addEventListener('DOMContentLoaded', Funktion() {
    dokumentieren.getElementById("Ausgang").innerHTML = "Seite geladen!";
    });
  7. Öffnen Sie die Datei index.html in einem Webbrowser, um die Nachricht anzuzeigen, wenn die Seite fertig geladen ist:
  8. Anstatt JavaScript-Ereignisse zu verwenden, um zu prüfen, ob eine Seite geladen wurde, können Sie auch die verwenden laden HTML-Attribut für dasselbe Ergebnis. Fügen Sie das onload-Attribut zum Body-Tag in Ihrer HTML-Datei hinzu:
    <Körperladen="drin()">
  9. Erstellen Sie die drin() Funktion innerhalb der JavaScript-Datei. Es wird nicht empfohlen, das HTML-Attribut onload und das JavaScript-Ereignis onload gleichzeitig zu verwenden. Dies könnte zu unerwartetem Verhalten oder Konflikten zwischen den beiden Funktionen führen.
    Funktiondrin() {
    dokumentieren.getElementById("Ausgang").innerHTML = "Seite geladen!";
    }

Wir empfehlen die Verwendung der JavaScript-Ereignis-Listener und der window.onload Methode über das HTML laden -Attribut, weil es eine gute Praxis ist, das Verhalten und den Inhalt der Webseite getrennt zu halten. Außerdem bieten die JavaScript-Ereignis-Listener mehr Kompatibilität und Flexibilität gegenüber den beiden anderen Methoden.

So verwenden Sie onLoad mit dem Bild-HTML-Element

Sie können das onload-Ereignis auch verwenden, um Code auszuführen, wenn andere Elemente auf der Seite geladen werden. Ein Beispiel hierfür ist das Bildelement.

  1. Fügen Sie im selben Ordner wie Ihre index.html-Datei ein beliebiges Bild hinzu.
  2. Fügen Sie in der HTML-Datei ein Bild-Tag hinzu und verknüpfen Sie das src-Attribut mit dem Namen des im Ordner gespeicherten Bilds.
    <BildAusweis="mein Bild"Quelle="Pidgeymon.png"Breite="300">
  3. Fügen Sie ein weiteres leeres Absatz-Tag hinzu, um eine Nachricht anzuzeigen, wenn das Bild geladen wird:
    <PAusweis="imageLoadedMessage">P>
  4. Fügen Sie in der JavaScript-Datei ein onload-Ereignis für das Bild hinzu. Verwenden Sie die eindeutige ID mein Bild So bestimmen Sie, welchem ​​Bildelement das onload-Ereignis hinzugefügt werden soll:
    Var meinBild = dokumentieren.getElementById("mein Bild");
    meinBild.onload = Funktion() {

    };
  5. Ändern Sie innerhalb des Onload-Ereignisses den inneren HTML-Code, um die hinzuzufügen Bild geladen Nachricht:
    dokumentieren.getElementById("imageLoadedMessage").innerHTML = "Bild geladen!";
  6. Anstatt zu verwenden myImage.onload, können Sie auch einen Ereignis-Listener verwenden, um die zu überwachen Belastung JavaScript-Ereignis:
    meinBild.addEventListener('Belastung', Funktion() {
    dokumentieren.getElementById("imageLoadedMessage").innerHTML = "Bild geladen!";
    });
  7. Öffnen Sie index.html in einem Webbrowser, um das Bild und die Nachricht anzuzeigen:
  8. Für dasselbe Ergebnis können Sie auch das HTML-Attribut onload verwenden. Ähnlich wie beim body-Tag fügen Sie dem img-Tag ein onload-Attribut hinzu:
    <BildAusweis="mein Bild"Quelle="Pidgeymon.png"Breite="300"laden="imageLoaded()">
  9. Fügen Sie die Funktion in der JavaScript-Datei hinzu, um den Code auszuführen, wenn das Bild geladen wurde:
    FunktionBildGeladen() {
    dokumentieren.getElementById("imageLoadedMessage").innerHTML = "Bild geladen!";
    }

So verwenden Sie onLoad beim Laden des JavaScripts

Sie können das HTML-Attribut onload verwenden, um zu überprüfen, ob der Browser das Laden der JavaScript-Datei abgeschlossen hat. Es gibt kein entsprechendes JavaScript-Onload-Ereignis für das script-Tag.

  1. Fügen Sie das onload-Attribut zum script-Tag in Ihrer HTML-Datei hinzu.
    <SkriptQuelle="script.js"laden="LoadedJs()">Skript>
  2. Fügen Sie die Funktion zu Ihrer JavaScript-Datei hinzu. Drucken Sie eine Nachricht von Anmeldung an der Browser-Konsole:
    FunktionLoadedJs() {
    Konsole.Protokoll("JS vom Browser geladen!");
    }
  3. Öffnen Sie die Datei index.html im Browser. Du kannst Verwenden Sie Chrome-DevTools, um alle in der Konsole ausgegebenen Nachrichten anzuzeigen.

Laden von Webseiten im Browser

Jetzt können Sie Funktionen und Ereignisse verwenden, um bestimmten Code auszuführen, wenn eine Webseite vollständig geladen ist. Das Laden von Seiten ist ein wichtiger Faktor bei der Schaffung einer reibungslosen und nahtlosen Benutzererfahrung.

Erfahren Sie mehr darüber, wie Sie interessantere Ladeseiten-Designs in Ihre Website integrieren können.