- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check whether image is loaded or not?
Overview
To check for an image whether it is loaded or not in order to perform some actions can be done by using JavaScript. In many cases our browser fails to load the image due to large size of image, or poor network connectivity. So our image may sometimes show some errors. So to know whether our image is loaded or not we have certain methods such as onload(), onerror() and complete property.
Syntax
The syntax to solve the problem are −
onload="function()" − This function is called when the image is loaded successfully. In this any callback function is passed to perform a specific action.
onerror="function()" − This function triggers when the image faces a problem while loading due to any reason.
selector.complete − The selector.complete method selects the image with class name, id or by Tag name and then it checks whether the image is loaded completely or not.
To check for the loaded image we have two approaches
Method 1 − In this approach we will use two methods onload() and onerror(). In these two methods, a function will be passed as an argument which will be called on the load of the browser and will check whether an image is loaded or not.
Algorithm
Step 1 − Create an image tag in HTML and insert a link or path of an image in src attribute <image src= “put your link here”/>.
Step 2 − Access the image tag and store it in variable.
Step 3 − Use load() method and error() method in the addEventListener().
Step 4 − If on loading the browser the image is loaded successfully the load event will trigger and will return a particular action, otherwise if the image is unable to load then the error event will trigger.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check whether image is loaded or not</title>
<style>
body{
min-height: 90vh;
display: flex;
flex-direction: column;
place-content: center;
background-color: #0a0a0a;
color: white;
text-align: center;
}
img{
width: 50%;
height: 70%;
border-radius: 8px;
margin: auto auto ;
box-shadow: 0 0 8px white;
}
</style>
</head>
<body>
<img src= "https://www.tutorialspoint.com/images/logo.png" id="sample" onload="checkLoad()" onerror="checkError()" alt="error">
<h2 id="output"></h2>
<script>
document.getElementById("sample").addEventListener("load", () => {
document.getElementById("output").innerText="Image Loaded Sucessfully";
})
document.getElementById("sample").addEventListener("error", () => {
document.getElementById("output").innerText="Error occured while loading image!";
})
</script>
</body>
</html>
Which there was no error while loading an image on the web browser. So in the example the load() method in the addEventListener() triggers with the output “Image Loaded Successfully”.
Method 2 − In this approach we call the complete() method of an image object, which checks whether the image is loaded completely and on that behalf it returns true or false. When the image faces any problem in loading it returns false otherwise true.
Algorithm
Step 1 − Create an image tag in HTML and insert a link or path of an image in src attribute <image src= “put your link here”/>.
Step 2 − Access the image tag and store it in variable.
Step 3 − Use complete() method of image object. If the image is loaded in the browser it will alert true on the browser, otherwise it will alert false on the browser.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check whether image is loaded or not</title>
<style>
body{
min-height: 90vh;
display: flex;
flex-direction: column;
place-content: center;
background-color: #0a0a0a;
color: white;
text-align: center;
}
img{
width: 50%;
height: 70%;
border-radius: 8px;
margin: auto auto ;
box-shadow: 0 0 8px white;
}
</style>
</head>
<body>
<img src= "https://www.tutorialspoint.com/images/logo.png" id="sample" onload="checkLoad()" onerror="checkError()" alt="error">
<h2 id="output"></h2>
<script>
var i = document.getElementById("sample");
var load = i.complete;
alert(load);
</script>
</body>
</html>
The above code shows the output for which the complete() method returns true.
Conclusion
The return type of complete() method is Boolean as it returns true or false on the basis of current situation. The image cannot be loaded in certain situations such as wrong URL of an image, poor internet connectivity, image is not present in the located directory. The above solution is helpful in many cases as it triggers a particular action when the image is fully loaded. The image object in JavaScript contains many methods that help manipulate the image in the DOM.
3K+ Views
