Wie kann ich eine Rückruffunktion ausführen, nachdem ein Bild in JavaScript geladen wurde?

Alternative Möglichkeiten, das Laden von Bildern mit einem Rückruf zu handhaben

Beim Laden eines Bildes kann es für die Implementierung bestimmter Funktionen von entscheidender Bedeutung sein, zu wissen, wann es abgeschlossen ist . Diese Frage untersucht Optionen zum Ausführen eines Rückrufs beim Laden eines Bildes in JavaScript.

Lösung 1: .complete-Rückruf

Ein zuverlässiger und standardkonformer Ansatz beinhaltet die Verwendung von .complete Eigenschaft zusammen mit einer Rückruffunktion. .complete prüft, ob das Bild bereits vollständig geladen wurde, und stellt sicher, dass der Rückruf gegebenenfalls sofort ausgelöst wird.

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

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

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

Dieser Code:

1. Initialisiert ein Bildelement mit img.
2. Definiert eine Rückruffunktion, die geladen wird, um das Laden des Bildes zu verarbeiten.
3. Überprüft, ob das Bild bereits vollständig ist .complete.
4. Wenn der Rückruf abgeschlossen ist, wird der Rückruf sofort aufgerufen.
5. Wenn nicht abgeschlossen, werden Ereignis-Listener für „load“ (um den Rückruf beim Laden auszuführen) und „error“ (zur Benachrichtigung) angehängt des fehlgeschlagenen Ladens).

Zusätzliche Hinweise

Dieser Ansatz ist äußerst effizient da es den Rückruf auslöst, sobald das Bild fertig ist, wodurch unnötige Verzögerungen durch das Warten des Ereignis-Listeners vermieden werden. Es wird auch von den wichtigsten Browsern unterstützt und ermöglicht eine einfache Fehlerbehandlung.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Rückruffunktion ausführen, nachdem ein Bild in JavaScript geladen wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!