In JavaScript, the Image “onload” event occurs when the image is loaded successfully on a web page. This feature can be utilized when we need to load images on our web pages to make them attractive. Image onload event is also used in the development of websites that display the products’ images, logos, and banners.
This article will highlight the image onload event using JavaScript.
How to Use Image onload JavaScript Event?
You can utilize the following methods for performing image onload event operation in JavaScript:
- querySelector()
- User-defined function
We will now go through each of the mentioned approaches one by one!
Method 1: Use Image onload Event in JavaScript with document.querySelector()
The “document.querySelector()” method is primarily used to return the first element that matches with a particular selector within the document. For instance, it can be utilized to define an event for accessing an image from the HTML file.
The below-given example will use the document.querySelector() method to define an image on load event.
Example
First, we will add the image source “src” in the HTML file:
Now, move to the JavaScript file and call the “addEventListener()” method with the window object. This method will be used to add an event listener to load the desired image with the help of the “document.querySelector()” method. After that, add a pop-up alert with the stated message:
var img = document.querySelector('img');
alert("Image is Loaded Successfully");
});
Lastly, specify the source of the JavaScript file in the head or body tag:
Opening the given HTML file will show the following output:
After loading the selected image, the following alert box will also pop up with a message:
Method 2: Use Image onload Event in JavaScript with User-defined Function
A user-defined function can also be utilized for the image on loading process, which is accessed in “HTML” file via “onload”. This function will return the image status in an alert box.
Check out the following example to understand the stated concept.
Example
First, we will define an “Imageonload()” function and show the status of the image to be loaded via alert box:
alert("Image is loaded successfully");
}
Next, we will add the path of the image that needs to be downloaded and call the defined “Imageonload()” function as “onload” event. Moreover, we will also specify the source of the JavaScript file in the HTML file:
<script src="image onload 2.js"></script>
Output
We have provided different methods to use the image onload event in JavaScript.
Conclusion
To use the image onload event in JavaScript, you can use the document.querySelector() method or user-defined function. In the first approach, the addEventListener() method is called with the window object used to add an event listener to the document.querySelector() method. For the second approach, a user-defined object can be created, which is accessed in the HTML file via onload event. This write-up discussed the method to use an onload JavaScript event.
