JavaScript/DOM/Document/images/complete
Die Eigenschaft complete speichert den Ladezustand, d. h. ob der Versuch, eine Grafik zu laden, abgeschlossen wurde. Enthält den Wert true, wenn der Versuch abgeschlossen wurde, und den Wert false, wenn gerade versucht wird, die Grafik zu laden, die Grafik nicht oder nicht vollständig geladen ist.
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="berthold.gif" alt="Berthold"><br>
<img src="boris.gif" alt="Boris"><br>
<img src="bernd.gif" alt="Bernd"><br>
<button type="button" id="bildCheck">Grafiken checken</button>
<script>
document.querySelector("#bildCheck")
.addEventListener(function() {
let Status = "";
for (let i = 0; i < document.images.length; ++i) {
if (document.images[i].complete == true) {
Status = Status + "Grafik " + (i + 1) + " geladen\n";
}
else {
Status = Status + "Grafik " + (i + 1) + " nicht geladen\n";
}
}
Status = Status + document.images.length + " Grafiken im Dokument";
alert(Status);
}
</script>
</body>
</html>
Das Beispiel enthält mehrere Grafiken und einen Button. Beim Anklicken des Buttons wird eine Funktion aufgerufen, die im Script-Bereich als click-Handler für diesen Button festgelegt wurde. Diese Funktion ermittelt in einer for-Schleife für jede einzelne Grafik in der Datei (ermittelbar mit document.images.length), ob diese geladen ist (if (document.images[i].complete == true)) oder nicht. Das Ergebnis wird in einer Variablen Status gesammelt. Am Ende wird der Inhalt von Status mit alert() ausgegeben.
naturalWidth der Grafik abfragen. Ist der Wert 0, wurde die Grafik nicht geladen. SVG-Bildern hingegen liefern diesen Wert nur, wenn er im SVG auch gesetzt wurde. Ein weiterer Weg zum Erkennen von Ladefehlern ist es, sich auf das error-Event des <img>-Elements zu registrieren. Aber auch das kann fehlschlagen, wenn der Ladefehler so schnell erfolgt, dass Sie noch nicht zum Registrieren des error-Handlers gekommen sind.
