Wie kann ich Rückrufe implementieren, um Bildladeereignisse in JavaScript zu verarbeiten?

Rückrufe für Bildladeereignisse implementieren

Bei der Arbeit mit Bildern in Webanwendungen ist es für bestimmte Funktionen von entscheidender Bedeutung, zu wissen, wann der Ladevorgang abgeschlossen ist. Eine effiziente Möglichkeit, dies zu erreichen, ist die Verwendung von Rückrufen. In diesem Artikel erfahren Sie, wie Sie einen JavaScript-Rückruf ausführen, sobald das Laden eines Bildes abgeschlossen ist.

Verwendung von .complete mit Rückrufen

Für eine standardkonforme Darstellung Methode ohne zusätzliche Abhängigkeiten können Sie die .complete-Eigenschaft zusammen mit Rückruffunktionen verwenden. Diese Technik stellt sicher, dass Sie nicht länger als nötig auf das Laden des Bildes warten:

var img = document.querySelector('img');

function loaded() {
  alert('loaded');
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
  img.addEventListener('error', function() {
    alert('error');
  });
}

Dieses Code-Snippet prüft zunächst, ob das Bild bereits geladen ist, indem es seine .complete-Eigenschaft untersucht. Wenn es wahr ist, wird der Loaded()-Rückruf sofort aufgerufen. Wenn es falsch ist, werden Ereignis-Listener an die Lade- und Fehlerereignisse angehängt, um den Rückruf bzw. die Fehlerbehandlung zu verarbeiten.

Diese Methode ist zuverlässig und stellt sicher, dass der Rückruf ausgeführt wird, sobald das Bild vollständig geladen ist. Minimierung unnötiger Wartezeiten.

Das obige ist der detaillierte Inhalt vonWie kann ich Rückrufe implementieren, um Bildladeereignisse in JavaScript zu verarbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!