In this article, we will check whether the background image is loaded or not using JavaScript. In JavaScript, onload event is used to check whether a window is loaded or not. Similarly, we can use that event to check whether a particular element has loaded or not. There are two ways in which we can check whether a background image has loaded or not.Â
We can do this in three ways:
- Using HTML
- Using the onload attribute in Javascript
- Using addEventListener() method
Using HTML:
Syntax:
<element onload="myScript">
Example: This example checks whether the background image is loaded or not using Html.
HTML
<!DOCTYPE html> <html>   <head>     <script src=     </script>       <style>         #bg_img {             width: 50vw;             height: 50vh;         }     </style> </head>   <body>     <h2>Welcome To GFG</h2>       <p>         Default code has been         loaded into the Editor.     </p>           <img id="bg_img" onload="loadImage()" />           <p id="img_status"></p>           <script>         function loadImage() {             document.getElementById("img_status")                     .innerHTML = "image loaded";         }         document.getElementById("bg_img").src =           let ele = document.getElementById("bg_img");     </script> </body>   </html> |
Output:
Using onload attribute in JavaScript:
Syntax:
object.onload = function(){myScript};
Example: This example checks whether the background image is loaded or not using onload attribute in Javascript.
HTML
<!DOCTYPE html> <html>   <head>     <script src=     </script>           <style>         #bg_img {             width: 50vw;             height: 50vh;         }     </style> </head>   <body>     <h2>Welcome To GFG</h2>       <p>         Default code has been         loaded into the Editor.     </p>           <img id="bg_img" />           <p id="img_status"></p>           <script>         let ele = document.getElementById("bg_img");         ele.onload = (e) => {             document.getElementById("img_status")                     .innerHTML = "image loaded";         };         ele.src =     </script> </body>   </html> |
Output:
Using addEventListener() method in JavaScript
Syntax:
object.addEventListener("load", myScript);
Example: This example checks whether the background image is loaded or not using the addEventListener() method in Javascript.
HTML
<!DOCTYPE html> <html>   <head>     <style>         #bg_img {             width: 50vw;             height: 50vh;         }     </style> </head>   <body>     <h2>Welcome To GFG</h2>       <p>         Default code has been         loaded into the editor     </p>           <img id="bg_img" />           <p id="img_status"></p>           <script src=     </script>           <script>         let ele = document.getElementById("bg_img");         ele.addEventListener("load", (e) => {             document.getElementById("img_status")                     .innerHTML = "image loaded";         });           ele.src =     </script> </body>   </html> |
Output:
Note: To use jQuery replace the event listener code with the following –
$("#bg_img").on("load", function () {
window.alert("Image has loaded", 1);
});
