Question

我正在研究各种功能非常低的设备，并且由于各种原因而不想使用实际的img标签而希望切换到背景图像。似乎阻止我这样做的一个问题是没有与背景图像加载相关联的回调，这是至关重要的（因为这些设备上发生了故障）。

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

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

<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调用图像，然后一旦浏览器将它放在缓存中，然后应用该类，它应该加载。

不使用img元素的css background-image回调

1 个答案: