HTMLImageElement: complete-Eigenschaft

Wert

Ein boolescher Wert, der true ist, wenn das Bild vollstndig geladen ist; andernfalls ist der Wert false.

Das Bild gilt als vollstndig geladen, wenn eine der folgenden Bedingungen zutrifft:

• Weder das src- noch das srcset-Attribut ist angegeben.
• Das srcset-Attribut fehlt, und das src-Attribut, obwohl spezifiziert, ist der leere String ("").
• Die Bildressource wurde vollstndig abgerufen und wurde zur Anzeige/Komposition eingereiht.
• Das Bildelement hat zuvor festgestellt, dass das Bild vollstndig verfgbar und einsatzbereit ist.
• Das Bild ist "defekt"; das heit, das Bild konnte aufgrund eines Fehlers nicht geladen werden oder das Laden von Bildern ist deaktiviert.

Es ist wichtig zu beachten, dass sich der Wert von complete ndern kann, whrend Ihr Skript luft, da das Bild mglicherweise asynchron empfangen wird.

Beispiele

Funktionen nur bei geladenen Bildern ausfhren

Stellen Sie sich eine Fotobibliotheks-App vor, die die Mglichkeit bietet, Bilder im Lightbox-Modus fr eine verbesserte Ansicht sowie zur Bearbeitung des Bildes zu ffnen. Diese Fotos knnen sehr gro sein, sodass Sie nicht darauf warten mchten, dass sie geladen werden. Ihr Code verwendet async/await, um die Bilder im Hintergrund zu laden.

Aber stellen Sie sich vor, Sie haben anderen Code, der nur ausgefhrt werden muss, wenn das Bild vollstndig geladen ist, wie ein Befehl, der eine Rote-Augen-Korrektur auf das Bild im Lightbox-Modus anwendet. Idealerweise wrde dieser Befehl nicht einmal ausgefhrt werden, wenn das Bild nicht vollstndig geladen ist. Zur Verbesserung der Zuverlssigkeit mchten Sie sicherstellen, dass dies der Fall ist.

Also berprft die Funktion fixRedEyeCommand(), die durch den Knopf ausgelst wird, der die Rote-Augen-Korrektur anstt, den Wert der complete-Eigenschaft des Lightbox-Bildes, bevor sie ihre Arbeit verrichtet. Dies wird im unten stehenden Code demonstriert.

const lightboxElem = document.querySelector("#lightbox");
const lightboxImgElem = lightboxElem.querySelector("img");
const lightboxControlsElem = lightboxElem.querySelector(".toolbar");

async function loadImage(url, elem) {
  return new Promise((resolve, reject) => {
    elem.onload = () => resolve(elem);
    elem.onerror = reject;
    elem.src = url;
  });
}

async function lightBox(url) {
  lightboxElem.style.display = "block";
  await loadImage("https://some-site.net/huge-image.jpg", lightboxImgElem);
  lightboxControlsElem.disabled = false;
}

// 

function fixRedEyeCommand() {
  if (lightboxElem.style.display === "block" && lightboxImgElem.complete) {
    fixRedEye(lightboxImgElem);
  } else {
    /* can't start doing this until the image is fully loaded */
  }
}

Spezifikationen

Browser-Kompatibilitt