如何检查是否加载了背景图像？

在前端开发中，图片的加载是非常重要的一部分。而有时候我们需要知道背景图像是否已经被成功加载，进行后续操作或者提供用户友好的交互体验。那么，该如何检查背景图像是否已经加载呢？接下来，我将详细介绍一些方法和技巧。

1. 使用 onload 事件

使用 onload 事件可以检测图像加载状态。当图像加载完成后会触发该事件，此时可以通过编写回调函数来实现对图像加载状态的检测。

<div id="bg" style="background-image: url('your-image-url')"></div>

const bg = document.getElementById('bg');
const img = new Image();
img.onload = function() {
  console.log('Image loaded!');
};
img.src = bg.style.backgroundImage.match(/url\("?(.+?)"?\)/)[1];

上述代码创建了一个新的图像对象，并将其赋值给 src 属性，从而触发 onload 事件。注意，为了获取背景图像的 URL，需要使用正则表达式从 backgroundImage 属性中提取。

2. 使用 CSS 属性 background-size

CSS 的 background-size 属性用于设置背景图片的大小。如果背景图像的高度和宽度都为 0，则说明图像没有成功加载。因此，我们可以利用这个特性来检查背景图像的加载状态。

<div id="bg" style="background-image: url('your-image-url')"></div>

#bg.unloaded {
  background-size: 0 !important;
}

const bg = document.getElementById('bg');
if (window.getComputedStyle(bg).getPropertyValue('background-size') === '0px 0px') {
  console.log('Image not loaded!');
  bg.classList.add('unloaded');
} else {
  console.log('Image loaded!');
}

上述代码首先通过获取 background-size 属性值来判断是否加载成功，并根据结果设置相应的类名。当背景图像没有成功加载时，为其添加了一个名为 unloaded 的类。

3. 使用 IntersectionObserver

IntersectionObserver API 可以用于检测一个元素是否已经进入视口。因此，我们可以将背景图像放置在一个不可见的容器中，并使用 IntersectionObserver 对该容器进行观察。当该容器进入视口后，便说明背景图像已经成功加载。

<div class="container">
  <div id="bg" style="background-image: url('your-image-url')"></div>
</div>

const bg = document.getElementById('bg');
const container = document.querySelector('.container');
const io = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    console.log('Image loaded!');
  }
});
io.observe(container);

上述代码中，我们创建了一个名为 container 的容器，将背景图像放置其中。然后，利用 IntersectionObserver 监听该容器的状态变化，并在容器进入视口时触发回调函数来检测背景图像是否加载成功。

综上所述，以上是三种检查背景图像是否已经加载的方法。开发者可以根据实际需求选择相应的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10245