So verwenden Sie das Bild -Onload -Ereignis in JavaScript

In JavaScript das Bild “OnloadEreignis erfolgt, wenn das Bild erfolgreich auf einer Webseite geladen wird. Diese Funktion kann verwendet werden, wenn wir Bilder auf unseren Webseiten laden müssen, um sie attraktiv zu machen. Image Onload -Ereignis wird auch in der Entwicklung von Websites verwendet, auf denen die Bilder, Logos und Banner der Produkte angezeigt werden.

In diesem Artikel wird das Image Onload -Ereignis mit JavaScript hervorgehoben.

So verwenden Sie Image Onload JavaScript -Ereignis?

Sie können die folgenden Methoden zur Durchführung von Image Onload -Ereignisoperation in JavaScript verwenden:

• QuerySelector ()
• Benutzerdefinierte Funktion

Wir werden jetzt jede der genannten Ansätze einzeln durchlaufen!

Methode 1: Verwenden Sie das Bild -Onload -Ereignis in JavaScript mit Dokument.QuerySelector ()

Der "dokumentieren.QuerySelector ()Die Methode wird in erster Linie verwendet, um das erste Element zurückzugeben, das mit einem bestimmten Selektor innerhalb des Dokuments übereinstimmt. Zum Beispiel kann es verwendet werden, um ein Ereignis zum Zugriff auf ein Bild aus der HTML -Datei zu definieren.

Das folgende Beispiel verwendet das Dokument.QuerySelector () -Methode zum Definieren eines Bildes beim Lastereignis.

Beispiel

Erstens werden wir die Bildquelle hinzufügen “src”In der HTML -Datei:

Gehen Sie nun in die JavaScript -Datei und rufen Sie die “an"AddEventListener ()Methode mit dem Fensterobjekt. Diese Methode wird verwendet, um einen Ereignishörer hinzuzufügen, um das gewünschte Bild mit Hilfe des “zu ladendokumentieren.QuerySelector ()" Methode. Fügen Sie danach eine Popup-Warnung mit der angegebenen Nachricht hinzu:

Fenster.AddEventListener ("Load", Ereignis =>
var img = dokument.QuerySelector ('IMG');
alarm ("Bild wird erfolgreich geladen");
);

Geben Sie zuletzt die Quelle der JavaScript -Datei im Kopf- oder Körper -Tag an:

Das Öffnen der angegebenen HTML -Datei zeigt die folgende Ausgabe an:

Nach dem Laden des ausgewählten Bildes wird auch das folgende Alarmfeld mit einer Nachricht angezeigt:

Methode 2: Verwenden Sie das Bild-Onload-Ereignis in JavaScript mit benutzerdefinierter Funktion

Eine benutzerdefinierte Funktion kann auch für das Bild beim Ladevorgang verwendet werden, auf das in “zugegriffen wird“Html"Datei über"Onload”. Diese Funktion gibt den Bildstatus in einem Alarmbox zurück.

Schauen Sie sich das folgende Beispiel an, um das angegebene Konzept zu verstehen.

Beispiel

Erstens werden wir eine definieren “Imageonload ()Funktion und zeigen Sie den Status des Bildes an, das über Alarmbox geladen werden soll:

Funktion imageonload ()
alarm ("Bild wird erfolgreich geladen");

Als nächstes werden wir den Pfad des Bildes hinzufügen, der heruntergeladen und das definierte aufrufen muss “Imageonload ()" funktionieren als "Onload" Fall. Darüber hinaus werden wir auch die Quelle der JavaScript -Datei in der HTML -Datei angeben:

lt; img Src = "E: \ Job Technische Artikel \ Bild.Png "onload =" Imageonload () ">

Ausgang

Wir haben verschiedene Methoden zur Verwendung des Image Onload -Ereignisses in JavaScript bereitgestellt.

Abschluss

Um das Image Onload -Ereignis in JavaScript zu verwenden, können Sie das Dokument verwenden.QuerySelector () -Methode oder benutzerdefinierte Funktion. Im ersten Ansatz wird die Methode addEventListener () mit dem Fensterobjekt aufgerufen.QuerySelector () -Methode. Für den zweiten Ansatz kann ein benutzerdefiniertes Objekt erstellt werden, auf das in der HTML-Datei über das Onload-Ereignis zugegriffen wird. In diesem Artikel wurde die Methode zur Verwendung eines Onload-JavaScript-Ereignisses besprochen.