Image Onload-Ereignis in JavaScript
-
das
.onload-Ereignis in JavaScript -
das
image.onload-Event in JavaScript -
das Event
image.onloadin HTML
In diesem Artikel wird erläutert, wie wir das Ereignis .onload in JavaScript behandeln können. Wir werden lernen, wie man mit JavaScript eine Warnbox erstellt, wenn ein Bild hochgeladen wurde.
Wir erfahren auch, wie wir mit JavaScript überprüfen können, ob ein Bild geladen wird oder nicht, indem wir eine Warnbox erstellen.
das .onload-Ereignis in JavaScript
Das Ereignis .onload tritt nur auf, wenn ein Objekt geladen wurde. Das .onload-Ereignis wird hauptsächlich innerhalb des Elementkörpers verwendet, um ein Skript auszuführen, sobald eine Webseite alle Inhalte geladen hat, einschließlich Bilder, Skript, CSS-Dateien usw.
Die verwendeten Browser ermöglichen es uns, das Laden externer Ressourcen wie Bilder, Skripte, Iframes usw. zu verfolgen. Wenn wir ein Bild hochladen und es im Browser-Cache gespeichert wird, wird das Ereignis onload ausgelöst.
Wie können wir ein Warnfeld erstellen, das angezeigt wird, wenn ein Bild geladen wird, unabhängig davon, ob das Bild zwischengespeichert ist?
Wir müssen ein Warnfeld erstellen, das eine Meldung mit der Aufschrift Das Bild wurde erfolgreich geladen anzeigt, wenn das Ereignis onload auf einem Bild ausgelöst wird. Wir können dieses Problem mit JavaScript und HTML angehen.
das image.onload-Event in JavaScript
Mittels JavaScript können wir überprüfen, ob ein Bild vollständig geladen wurde oder nicht. Wir verwenden das vollständige Attribut der Schnittstelle HTMLimageElement.
Dieses Attribut gibt true zurück, wenn das Bild vollständig hochgeladen wurde, andernfalls false. Wir haben die Eigenschaften naturalWidth und naturalHeight in JavaScript, und wir können beide verwenden.
Wir haben im Beispielcode .naturalWidth verwendet, der true zurückgibt, wenn das Bild erfolgreich geladen wird, und 0, wenn nicht.
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using Javascript</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using Javascript</h1>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar">
</body>
</html>
JavaScript-Code:
window.addEventListener('load', event => {
var image = document.querySelector('img');
var isLoadedSuccessfully = image.complete && image.naturalWidth !== 0;
alert(isLoadedSuccessfully);
});
Wenn wir diesen Code ausführen, gibt er true zurück, was bedeutet, dass das Bild erfolgreich geladen wurde.
Sie können die Live-Demo des obigen Beispielcodes sehen, indem Sie hier klicken.
das Event image.onload in HTML
Falls wir kein JavaScript verwenden möchten, können wir HTML-Attribute verwenden, um zu überprüfen, ob ein Bild geladen wurde oder nicht. In HTML können wir die Attribute onload und onerror verwenden.
In HTML wird das Attribut onload ausgelöst, wenn das Bild erfolgreich geladen wurde, während das Attribut onerror ausgelöst wird, wenn beim Laden eines Bilds ein Fehler auftritt.
Wir haben im folgenden Code die Attribute onload und onerror verwendet. Mit Hilfe dieser Attribute können wir also eine Warnbox erstellen, die eine Meldung mit der Aufschrift Das Bild wurde erfolgreich geladen anzeigt, wenn das Bild geladen ist.
Wenn beim Laden des Bildes ein Fehler auftritt, wird die Meldung Das Bild wurde nicht geladen angezeigt.
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using HTML</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using HTML </h1>
<p id="currentTime"></p>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar"
onload="javascript: alert('The image is loaded successfully')"
onerror="javascript: alert('Image is not loaded')" />
</body>
</html>
Wenn wir den Code ausführen, wird eine Warnmeldung angezeigt, dass das Bild erfolgreich geladen wurde.
Klicken Sie hier, um die Live-Demo des angegebenen Beispielcodes anzuzeigen.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn