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

我们主要使用JavaScript来创建动态网页应用。这种脚本语言使网页看起来更具交互性。JavaScript极大地为我们的网站添加了一些逻辑。正如我们提到的，用户可以检查背景图片是否已加载。网页开发者可以了解页面是否正确加载以及背景图片是否正确显示。

为了检查网页开发者指定的背景图片是否已加载，用户可以使用图像对象。我们可以访问与图像相关的对象的属性和方法，并且可以使用JavaScript的两种技术来检查背景图片是否已加载。

  • 使用onload() 属性

  • 使用addEventListener() 方法

当图像加载完毕时，会自动触发名为“onload”的事件。假设我们编写任何函数，该函数将在图像加载完成后执行。我们可以在图像正确加载后对该图像执行任何操作。我们也可以使用“addEventListener()”方法来执行相同的操作。在本教程中，我们将学习如何使用JavaScript检查背景图片是否已加载。

使用onload属性

正如我们之前讨论的，我们可以使用onload属性。onload是一个JavaScript事件处理程序。当一个元素（如图像）完成加载时，如果onload属性指定了函数，则会调用该函数。无论组件是否成功加载，只要完成加载，就会触发onload事件。

onload事件也可以与其他元素一起使用，例如<iframe>或<body>，但它最常与<img>标签一起使用，以确定图像是否已完成加载。

语法

<element onload = "functionName()">

在此语法中，当元素完成加载时，将执行‘functionName’函数。

示例

在此示例中，我们使用JavaScript检查背景图片是否已加载。我们使用一个图片作为背景图片，并使用onload事件处理程序属性来触发加载事件，该事件将执行一个函数。默认情况下，我们将div的文本设置为“背景图片未加载！”，并且每当触发onload事件处理程序时，我们将文本更改为“背景图片已加载！”。

Open Compiler
<html>
<body>
   <h3>Checking whether the <i>background image is loaded or not</i> using JavaScript</h3>
   <div style = "height: 100px">
      <img src = "https://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>

使用addEventListener() 方法

用户可以使用的第二种方法是addEventListener方法。此方法也可用于查看背景图片是否已加载。用户可以使用addEventListener方法向元素添加事件监听器，并指定一个回调函数，该函数将在事件发生时触发。

addEventListener方法有很多优点。此方法允许用户连接多个事件监听器，每个监听器都可以有其回调函数。使用onload属性，这是不可能的。

用户可以使用addEventListener方法将事件监听器附加到任何元素。它是使用onload属性的更灵活的替代方案，因为它可以为单个组件连接多个事件监听器及其回调函数。

语法

element_object.addEventListener('load', function () {
   // write your code here
})

在此语法中，element_object是我们使用addEventListener和load事件的元素对象。

示例

在此示例中，我们使用一个图片作为背景图片，并使用addEventListener方法将load事件绑定到图像元素。addEventListener方法还在参数中获取一个函数，该函数将在触发load事件时执行。默认情况下，我们将div的文本设置为“背景图片未加载！”，并且此函数会将文本更改为“背景图片已加载！”。

Open Compiler
<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://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>

总之，JavaScript可以检查背景图片是否已加载。这对于网页开发者确保页面正确显示以及显示的图片是预期的图片非常有用。

更新于：2023年2月8日

2K+ 浏览量

启动你的职业生涯

完成课程获得认证

开始学习
广告