Skip to content
Related Articles

Related Articles

Improve Article

How to check whether the background image is loaded or not using JavaScript ?

  • Last Updated : 03 Nov, 2020

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.

Syntax:

  • Using HTML:

    <element onload="myScript">
  • Using onload attribute in JavaScript:

    object.onload = function(){myScript};
    
  • Using addEventListener() method in JavaScript



    object.addEventListener("load", myScript);

HTML approach:

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:

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:

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 event listener code with the following –

$("#bg_img").on("load", function () {
  window.alert("Image has loaded", 1);
});

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :