值
如果影像已完全載入，則返回 true；否則，返回 false。
當以下任一情況為真時，影像被認為是完全載入的：
- 未指定
src或srcset屬性。 srcset屬性不存在，並且src屬性為空字串 ("")。- 影像資源已完全獲取並已排隊等待渲染/合成。
- 影像元素已確定影像完全可用並準備好使用。
- 影像“損壞”；即，影像因錯誤而載入失敗，或影像載入被停用。
值得注意的是，由於影像可能是非同步接收的，因此 complete 的值在指令碼執行時可能會發生變化。
示例
考慮一個照片庫應用程式，它提供了將影像開啟到燈箱模式的功能，以便更好地檢視和編輯影像。這些照片可能非常大，因此您不想等待它們載入，因此您的程式碼使用 async/await 在後臺載入影像。
但是，想象一下您有其他程式碼需要在影像載入完成後才能執行，例如在燈箱中對影像執行紅眼去除的命令。理想情況下，如果影像尚未完全載入，此命令甚至不應執行，為了提高可靠性，您希望進行檢查以確保這種情況。
因此，fixRedEyeCommand() 函式（由觸發紅眼去除的按鈕呼叫）在嘗試執行其工作之前會檢查燈箱影像的 complete 屬性的值。下面程式碼中的演示。
js
let lightboxElem = document.querySelector("#lightbox");
let lightboxImgElem = lightboxElem.querySelector("img");
let 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 */
}
}
規範
| 規範 |
|---|
| HTML # dom-img-complete-dev |
瀏覽器相容性
載入中…