html - 缺少背景图像占位符

Question

虽然关于 broken <img> 似乎有很多答案处理以在无法加载原始图像时显示替换图像，我似乎无法找到有关丢失背景图像的解决方案。

问题:如果未加载原始背景图像，我如何显示另一个背景图像？

我这样应用背景图像:

<div style="background-image: url('img/test.jpg');"></div>

Answer 1

您可以使用 javascript 检查图像的可用性。

var img = new Image();
img.src = 'img/test.jpg';
img.onload = function() {
    // create a script that will append style using background-image with this source
}

img.onerror = function() {
    // create a script that will append style using background-image with new source
}