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

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

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

我是否可以使用addEventListener将一个单独的回调附加到div之类的东西上，以监视its基于网络的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
}

.类{
背景图像：url（'./static/example.jpg'）；
}
函数onSuccess（）{//如果加载了./static/example.jpg，则调用此函数
}
函数onFailure（）{//在加载./static/example.jpg失败时调用此函数
}

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

大概是这样的：

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

---

这样做的想法是让JS调用图像，然后一旦浏览器将其放入缓存中，就应用类并加载它

你试过什么了吗？你能给我们看一下你的代码吗？看这个：@CodeToad，这行不通。该代码所做的是收集具有基于图像的CSS属性的所有元素，并生成一个相应的img标记供其侦听（正如其他人所建议的）。这假设完美的缓存（可能不可用），并可能发出另一个网络请求。如果图像回调成功，但实际CSS对象的网络请求失败怎么办？反之亦然。如果情况更糟，您只需添加一个带有

显示：none

的

标记，然后使用

imageLoaded

（）。然而，这只是一个解决办法。@tyteen4a03是的，我已经尝试过了，虽然有时可以这样做，但我不能保证每次在缓存较差或没有缓存的平台上都可以这样做。如果我做了标记，加载了图像，设置了背景url，但没有加载该url，该怎么办？从编程角度看，一切都很好，只是背景图像从未加载。