如何在 CSS 'content property'未加载时识别和删除元素？

Question

我正在做一个涉及许多单选按钮的项目，每个单选按钮都有一个精灵。像这样：

input[type='radio']{
-webkit-appearance:none;
appearance:none;
position:absolute;
display:content;
left:0px;
top:0px;
width:96px;
border-width:1px;
border-color:rebeccapurple;
border-style:dashed;
}
.input[type='radio']:checked{
filter:invert(100%);
}

然后，每个单选按钮都被标记为：

#i0000{content:url(0000.png);}
#i0001{content:url(0001.png);}
#i0002{content:url(0002.png);}
#i0003{content:url(0003.png);}

我使用css样式表为每个单选按钮提供不同的自定义图像。问题是，如果内容：url(image.png(；没有加载，则出现此错误：

GET file.../bad_image.png net::ERR_FILE_NOT_FOUND

通常情况下，我可以通过使用内联或脚本中的事件侦听器来遍历它们，如下所示：

onerror=this.style.display='none';

但是，因为我使用了CSS来加载图像，所以事件侦听器不工作，单选按钮仍然显示。我怎么能以这样一种方式对它们进行样式设置，即当它们不加载时，显示设置为"none"？

Answer 1

如果输入元素的样式更改为：

input[type='radio']{
-webkit-appearance:none;
appearance:none;
position:absolute;
display:content;
left:0px;
top:0px;
width:auto;
max-width: 96px;
border-width: 0px;
border-color: rebeccapurple;
border-style: dashed;
}
.input[type='radio']:checked{
filter:invert(100%);
}

则没有加载图像的输入不会出现(尽管它们仍然存在于HTML中(。

这将使您在不使用JS的情况下获得部分解决方案。

如果必须在已成功加载的图像周围设置虚线边框，则可以使用JS对所有图像进行循环，给出offsetWidth>0表示1px的边框宽度。诚然，2秒的停顿相当随机/笨拙，需要调整，如果加载时间真的很长，甚至可能需要重复，下面是一些基本的JS来添加虚线：

setTimeout(function () {
const inputs = document.querySelectorAll("input[type='radio']");
for (let i=0; i<inputs.length; i++) {
if (inputs[i].offsetWidth > 0) {inputs[i].style.borderWidth = '1px';}
}
}, 2000);