How to check whether an image is loaded or not ?

Namachila 2 weeks ago

0 1 1 minute read

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=
"https://media.zambiatek.com/wp-content/uploads/zambiatek-6.png"
     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=
"https://media.zambiatek.com/wp-content/uploads/zambiatek-6.png">
  </body>
</html>