HTMLImageElement.complete

The read-only HTMLImageElement interface's complete attribute is a Boolean value which indicates whether or not the image has completely loaded.

Syntax

let doneLoading = htmlImageElement.complete;

Value

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.
  • The 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.

Example

Imagine you have a page that displays a large image and wants to then prompt the user to take some action, once the image has loaded. This can be done using async/await. But imagine you also want to perform additional tasks if your code reaches a certain point and the image still hasn't fully loaded.

In that case, you can use code like this:

let hugeImage = document.querySelector("#huge-image");

if (hugeImage.complete) {
  /* The image is loaded already so go ahead and set up to
     create the rest of our UI now instead of queueing it to
     happen later */
  drawMyUI();
} else {
  /* schedule the UI construction to happen later */
}

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'HTMLImageElement.complete' in that specification.
Unknown

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
completeChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 5
Notes
Full support 5
Notes
Notes IE reports false for broken images.
Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.