html - 不使用 img 元素的 css 背景图像回调

Question

我正在研究各种非常低功率的设备，出于各种原因我想切换到背景图像，而不是使用实际的 img 标签。似乎阻止我这样做的一个问题是没有与背景图像加载相关的回调，这很关键(因为这些设备上会发生故障)。

我看到很多建议使用图像标记的回调来检查资源然后删除资源，但对我来说可能不够稳健。例如，如果平台不支持缓存，则可能会为同一图像创建两个网络请求/下载。此外，图像总是有可能成功加载图像，但背景图像加载失败。

我是否可以使用 addEventListener 将单独的回调附加到诸如 div 之类的东西，以监视其基于网络的 CSS 请求？或者，如果不是回调，至少要验证背景图像是否确实已加载？

<style>
.class {
  background-image: url('./static/example.jpg');
}
</style>
<div class="foo"></div>

function onSuccess() { // this called if ./static/example.jpg loaded
}

function onFailure() { // this called if ./static/example.jpg failed to load
}

Answer 1

是否可以使用 JS 加载图像，如果加载了，则将类应用于元素。

是这样的:

var img = new Image();
img.onload = function() {
    // add class
}
img.src = '/images/myImage.jpg';

想法是让 JS 调用图像，然后一旦浏览器在缓存中拥有它，然后应用该类，它应该加载。