HTMLImageElement.complete

在此页

句法
范例
规范
浏览器兼容性
相关话题

只读 HTMLImageElement 接口的 complete attribute is a Boolean value which indicates whether or not the image has completely loaded.

句法

let doneLoading = htmlImageElement.complete;

值

A Boolean value which is true if the image has completely loaded; otherwise, the value is false .

The image is considered completely loaded if any of the following are true:

Neither the src nor the srcset attribute is specified.
srcset attribute is absent and the src attribute, while specified, is the empty string ( "" ).
The image resource has been fully fetched and has been queued for rendering/compositing.
The image element has previously determined that the image is fully available and ready for use.
The image is "broken;" that is, the image failed to load due to an error or because image loading is disabled.

It's worth noting that due to the image potentially being received asynchronously, the value of complete may change while your script is running.

范例

Consider a photo library app that provides the ability to open images into a lightbox mode for improved viewing as well as editing of the image. These photos may be very large, so you don't want to wait for them to load, so your code uses async / await to load the images in the background.

But imagine that you have other code that needs to only run when the image has completed loading, such as a command that performs red-eye removal on the image in the lightbox. While ideally this command wouldn't even be executed if the image hasn't fully loaded, for improved reliability you want to check to ensure this is the case.

So the fixRedEyeCommand() function, which is called by the button that triggers red-eye removal, checks the value of the lightbox image's complete property before attempting to do its work. This is demonstrated in the code below.

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 实时标准 The definition of 'HTMLImageElement.complete' in that specification.	未知

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`complete`	Chrome 1	Edge 12	Firefox Yes	IE 8 8 IE reports `false` for broken images.	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android ?	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持
兼容性未知 ?

元数据

最后修改： Aug 21, 2020

在此页

句法

值

范例

规范

浏览器兼容性

图例

相关话题