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 the background image is loaded or not using JavaScript?
We mainly use JavaScript to create dynamic web applications. This kind of scripting language makes a web page look interactive. JavaScript significantly adds some logic to our website. As we mentioned, the user can check whether the background image is loaded. Web developers can understand that the page is loaded correctly and that the background image is displayed properly.
To check whether the background image is loaded as directed by the web developers on the web page user can use the image object. We can access this object's properties and methods related to an image, and we can apply two techniques of JavaScript to check whether the background image is loaded.
Using onload() attribute
Using addEventListener() method
An event called “onload” is triggered automatically when the image is loaded. Suppose we write any functions that the function will execute after the image loading is finished. We can take any action on that image after it is loaded properly. We also can use the “addEventListener()” method to do the same. In this tutorial, we will learn how to check whether the background image is loaded using JavaScript.
Using onload attribute
As we have discussed earlier, we can use the onload attribute. onload is a JavaScript event handler. When an element, like an image, has finished loading, a function, if specified by the onload property, will be invoked. Whether a component was successfully loaded or not, the onload event is triggered when it has been completed.
The onload event can be used with other elements also, such as <iframe> or <body>, but it is most frequently used with the <img> tag to determine whether an image has done loading or not.
Syntax
<element onload = "functionName()">
In this syntax, the ‘functionName’ function will be executed when the element finishes loading.
Example
In this example, we check whether the background image is loaded using JavaScript. We have taken an image as a background image and used the onload event handler attribute to trigger the load event that will execute a function. By default, we are taking the text of a div as ‘Background Image is not Loaded!’ and whenever the onload event handler is triggered, we change the text to ‘Background Image is Loaded!’.
<html>
<body>
<h3>Checking whether the <i>background image is loaded or not</i> using JavaScript</h3>
<div style = "height: 100px">
<img src = "https://www.tutorialspoint.com/images/logo.png" onload = "loadedFunc()" />
</div>
<div id = "root" style = "padding: 10px; background: #b8cdab">
Background Image is not Loaded!
</div>
<script>
let root = document.getElementById('root')
function loadedFunc() {
root.innerHTML = 'Background Image is Loaded!'
}
</script>
</body>
</html>
Using addEventListener() method
The second method user can use is the addEventListener method. This method can also be used to see if a background picture has been loaded. Users may add an event listener to an element and specify a callback function that will be triggered when the event happens using the addEventListener method.
The addEventListener method has many benefits. This method allows users to connect numerous event listeners, each of which can have its callback function. With the onload attribute, this is not feasible.
A user may attach an event listener to any element using the addEventListener method. It is a more flexible alternative to using onload attributes because it can link several event listeners alongside their callback functions for a single component.
Syntax
element_object.addEventListener('load', function () {
// write your code here
})
In this syntax, the element_object is the element's object where we use the addEventListener and load event.
Example
In this example, we have taken an image as a background image and used the addEventListener method to bind the load event with the image element. The addEventListener method also takes a function in the parameter that it will execute when the load event is triggered. By default, we are taking the text of a div as ‘Background Image is not Loaded!’ and this function changes the text to ‘Background Image is Loaded!’.
<html>
<body>
<h2>Checking whether the <i>background image is loaded or not</i> using JavaScript</h2>
<div>
<img
id = "myImage"
style = "height: 200px"
src="https://www.tutorialspoint.com/javascript/images/javascript.jpg"/>
</div>
<div id = "root" style = "padding: 10px; background: #edf0b8">
Background Image is not Loaded!
</div>
<script>
let root = document.getElementById('root')
let myImage = document.getElementById('myImage')
myImage.addEventListener('load', function () {
root.innerHTML = 'Background Image is Loaded!'
})
</script>
</body>
</html>
In conclusion, JavaScript can check whether a background image has been loaded. This can be useful for web developers to ensure that the page is displayed correctly and that the image displayed is intended.
1K+ Views
