如何使用 JavaScript 检查背景图像是否已加载？

在 JavaScript 中， onload事件用于检查窗口是否已加载。同样，我们可以使用该事件来检查特定元素是否已加载。有两种方法可以检查背景图像是否已加载。

句法：

• 使用 HTML：

• 在 JavaScript 中使用onload 属性：

  object.onload = function(){myScript};
  

• 在 JavaScript 中使用addEventListener() 方法

  object.addEventListener("load", myScript);

HTML 方法：

HTML

  

    
    
  
    
        #bg_img {
            width: 50vw;
            height: 50vh;
        }
    

  

    Welcome To GFG
  
    
        Default code has been 
        loaded into the Editor.
    
      
    
      
    
      
    
        function loadImage() {
            document.getElementById("img_status")
                    .innerHTML = "image loaded";
        }
        document.getElementById("bg_img").src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
  
        let ele = document.getElementById("bg_img");
    

  

输出：

使用onload属性：

HTML

  

    
    
      
    
        #bg_img {
            width: 50vw;
            height: 50vh;
        }
    

  

    Welcome To GFG
  
    
        Default code has been 
        loaded into the Editor.
    
      
    
      
    
      
    
        let ele = document.getElementById("bg_img");
        ele.onload = (e) => {
            document.getElementById("img_status")
                    .innerHTML = "image loaded";
        };
        ele.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
    

  

输出：

使用 addEventListener() 方法：

HTML

  

    
        #bg_img {
            width: 50vw;
            height: 50vh;
        }
    

  

    Welcome To GFG
  
    
        Default code has been 
        loaded into the editor
    
      
    
      
    
      
    
    
      
    
        let ele = document.getElementById("bg_img");
        ele.addEventListener("load", (e) => {
            document.getElementById("img_status")
                    .innerHTML = "image loaded";
        });
  
        ele.src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
    

  

输出：

注意：要使用 jQuery，请将事件侦听器代码替换为以下内容 –

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