Open In App

How to check whether an image is loaded or not ?

Improve
Improve
Like Article
Like
Save
Share
Report

While inserting images in HTML pages sometimes the image may fail to load due to:

  • Getting the image URL wrong
  • poor internet connection

So we may want to check if the image is not loading due to these reasons. To check we can use the below methods

Method 1: 

Using attributes of <img> to check whether an image is loaded or not. The attributes we will use are: 

  • onload: The onload event is triggered when an image is loaded and is executed
  • onerror: The onerror event is triggered if an error occurs during the execution

Example: 

html




<!DOCTYPE html>
<html>
  <head>
    <title>Image load check</title>
  </head>
  <body>
    <img src=
     onload=
"javascript: alert('The image has been loaded')"
     onerror=
"javascript: alert('The image has failed to load')" />
  </body>
</html>


Output:

when image is successfully loaded

when image loading fails

Method 2: 

Using the image complete property in HTML DOM

This property returns a boolean value  if the image is loaded it returns true else it returns false

Example: 

html




<!DOCTYPE html>
<html>
  <head>
    <title>Checking if image is loaded</title>
  </head>
  <script type="text/javascript">
  window.addEventListener("load", event => {
  var image = document.querySelector('img');
  var load = image.complete;
  alert(load);
});
  </script>
  <body>
    <img src=
  </body>
</html>


Here the variable load checks if the image is loaded or not. If an image is loaded then true is alerted else false is alerted.

Output:

when image is successfully loaded

when image load fails

Supported Browsers:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Safari
  • Opera


Last Updated : 12 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads