Wie kann ich Rückrufe verwenden, um das Laden von Bildern in JavaScript zu verarbeiten?

Bilder in JavaScript mit Rückrufen laden

Bei der Arbeit mit Bildern ist es oft notwendig zu wissen, wann der Ladevorgang abgeschlossen ist. Dadurch können Sie Aktionen basierend auf dem Status des Bildes ausführen, z. B. es anzeigen oder weiterverarbeiten.

Callback-Methode

In JavaScript ein gängiger Ansatz für Das Laden von Bildern erfolgt über die Verwendung einer Rückruffunktion. Ein Rückruf ist eine Funktion, die aufgerufen wird, wenn ein bestimmtes Ereignis eintritt, beispielsweise wenn das Bild vollständig geladen wird.

Die .complete-Eigenschaft eines Bildelements gibt seinen Ladestatus an. Wenn das Bild bereits geladen ist, können Sie die Callback-Funktion direkt aufrufen. Andernfalls können Sie dem Bild einen „Onload“-Ereignis-Listener hinzufügen.

Hier ist ein Beispiel:

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

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

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

Quelle: http://www.html5rocks.com/en/tutorials/ es6/promises/

Durch die Nutzung dieses Ansatzes können Sie den Bildladestatus zuverlässig ermitteln und über den bereitgestellten Rückruf entsprechende Aktionen ausführen Funktion.

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