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

在前端开发中，我们常常需要在背景图像加载完成后执行某些操作，例如显示元素和动画效果等。那么如何使用 JavaScript 检查背景图像是否已加载呢？

使用 Image 对象

JavaScript 中可以使用 Image 对象来加载图像。该对象提供了 onload 和 onerror 事件分别在图像加载成功和加载失败时触发。通过监听 onload 事件，可以判断背景图像是否已加载完成。

以下是一个例子：

const image = new Image();
image.src = 'background.jpg';
image.onload = () => {
  console.log('background image loaded');
  // 在此处执行加载完成后的操作
};
image.onerror = () => {
  console.log('background image failed to load');
};

其中，我们创建了一个新的 Image 对象，并将其 src 属性设置为背景图像的 URL。随后，监听了 onload 和 onerror 事件，分别在图像加载成功和加载失败时触发回调函数。

使用 CSS 属性

我们还可以使用 CSS 中的 background-image 属性来检查背景图像是否已加载。该属性的值为背景图像的 URL，如果图像加载成功，该属性的值将被更新为图像的实际 URL。因此，我们可以通过检查该属性的值是否与初始值相同来判断背景图像是否已加载完成。

以下是一个例子：

const element = document.getElementById('my-element');
const url = getComputedStyle(element).backgroundImage.slice(4, -1).replace(/"/g, '');

if (url !== 'initial') {
  console.log('background image loaded');
}

其中，我们首先获取了带有背景图像的元素，随后通过 getComputedStyle 方法获取了该元素应用的 CSS 样式。由于 background-image 属性的值为 URL("background.jpg") 的形式，因此我们需要使用 slice 方法将其前后的字符截取掉，再使用 replace 方法将双引号去除。最后，我们判断该属性的值是否等于初始值 initial，如果不相等，则说明背景图像已加载完成。

小结

通过使用 Image 对象或 CSS 属性，我们可以在 JavaScript 中检查背景图像是否已加载。上述两种方法均可以达到该目的，具体使用哪种方法，需要根据具体的场景和需求来决定。