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