值
如果图像已完全加载，则返回 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 |
浏览器兼容性
加载中…