如何使用 JavaScript 检查背景图像是否已加载?
我们主要使用 JavaScript 来创建动态 Web 应用程序。这种脚本语言使网页看起来具有交互性。JavaScript 为我们的网站增加了一些逻辑。正如我们提到的，用户可以检查背景图像是否已加载。Web 开发人员可以了解页面是否已正确加载，背景图像是否已正确显示。
要检查背景图像是否按照 Web 开发人员在网页上的指示加载，用户可以使用图像对象。我们可以访问此对象与图像相关的属性和方法，并且可以应用两种 JavaScript 技术来检查背景图像是否已加载。
使用 onload() 属性
使用 addEventListener() 方法
加载图像时会自动触发名为"onload"的事件。假设我们编写了在图像加载完成后将执行的任何函数。我们可以在图像正确加载后对其采取任何操作。我们也可以使用"addEventListener()"方法来执行相同操作。在本教程中，我们将学习如何使用 JavaScript 检查背景图像是否已加载。
使用 onload 属性
正如我们之前讨论过的，我们可以使用 onload 属性。onload 是一个 JavaScript 事件处理程序。当元素(如图像)完成加载时，将调用 onload 属性指定的函数。无论组件是否成功加载，完成时都会触发 onload 事件。
onload 事件也可以与其他元素一起使用，例如 <iframe> 或 <body>，但它最常用于 <img>标签来确定图像是否已完成加载。
语法
<element onload = "functionName()">
在此语法中，当元素完成加载时，将执行"functionName"函数。
示例
在此示例中，我们使用 JavaScript 检查背景图像是否已加载。 我们将图像作为背景图像，并使用 onload 事件处理程序属性来触发将执行函数的 load 事件。 默认情况下，我们将 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 () {
// 在此处编写代码
})
在此语法中，element_object 是元素的对象，我们在其中使用 addEventListener 和 load 事件。
示例
在此示例中，我们将图像作为背景图像，并使用 addEventListener 方法将 load 事件与图像元素绑定。 addEventListener 方法还在参数中接受一个函数，当触发 load 事件时它将执行该函数。默认情况下，我们将 div 的文本设为"背景图像未加载!"，此函数将文本更改为"背景图像已加载!"。
<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 可以检查背景图像是否已加载。这对于 Web 开发人员非常有用，可以确保页面正确显示并且显示的图像符合预期。
