HTMLImageElement：complete 属性

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中都可用 2015年7月.

只读的 HTMLImageElement 接口的 complete 属性是一个布尔值，指示图像是否已完全加载。

值

如果图像已完全加载，则为 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://somesite.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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。