JavaScript/DOM/Document/images/complete

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document‎ | images
Wechseln zu: Navigation, Suche

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.

Beispiel
<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.

Beachten Sie: Sie erkennen auf diese Weise nur, ob der Ladevorgang beendet wurde, aber nicht, ob das Bild erfolgreich geladen wurde. Um einen Ladefehler zu erkennen, können Sie bei Rastergrafiken die Eigenschaft 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.