Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to check whether an image is loaded or not ?

  • Last Updated : 05 Oct, 2021

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Method 1: 

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



  • onload: The onload event is triggered when a 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



My Personal Notes arrow_drop_up
Recommended Articles
Page :