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事件处理程序，我们就将文本改为 “背景图片已加载！”。

<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>

使用addEventListener()方法

用户可以使用的第二个方法是 addEventListener 方法。这个方法也可以用来查看背景图片是否已经被加载。用户可以为一个元素添加一个事件监听器，并指定一个回调函数，当事件发生时，使用addEventListener方法将被触发。

addEventListener 方法有很多好处。该方法允许用户连接众多事件监听器，每个监听器都可以有其回调函数。有了onload属性，这就不可行了。

用户可以使用 addEventListener 方法为任何元素附加一个事件监听器。这是一个比使用onload属性更灵活的选择，因为它可以将多个事件监听器与它们的回调函数一起连接到一个组件上。

语法

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

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

例子

在这个例子中，我们使用了一个图像作为背景图片，并使用addEventListener方法将加载事件与图像元素绑定。addEventListener方法在参数中也需要一个函数，当加载事件被触发时，它将执行该函数。默认情况下，我们将div的文本作为’Background Image is not Loaded!’，这个函数将文本改为’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>

总之，JavaScript可以检查一个背景图像是否已经被加载。这对网络开发者来说很有用，可以确保页面显示正确，而且显示的图像是预期的。