Javascript 如何在服务器关闭时预加载样式图像以使用它？

我有一个javascript小部件，它用报警LED图片指示服务器状态。图片是通过将适当的类应用到DOM元素并在CSS中定义适当的样式来选择的

问题是，当服务器关闭时，它无法为样式提供图像文件。所以，我的按钮看起来是空的

---

问题是：如何将图像预加载到浏览器缓存中，以便在服务器关闭时能够并将其显示？

您可以通过创建

img

元素并将路径分配给

src

来预加载图像：

var img = document.createElement('img');
img.src = "/path/to/image";

那会把它放在缓存里。我认为您甚至不必将其放入DOM中，浏览器才能加载它，但如果您想绝对确定，可以这样做：

img.style.position = "absolute";
img.style.left = "-10000px";
document.body.appendChild(img);

---

这会加载它，但在页面外用户看不到它。甚至最好是使用实际显示图像的任何元素，然后在显示图像时将元素移动到需要的位置，以避免浏览器在显示图像时发送一个新的

GET

，如果修改了

，则使用
，但从理论上讲，如果您的缓存头是正确的，浏览器就不会希望这样做。
有各种先进的方法可以用来预缓存图像，但我建议您采用更简单的方法

我将执行以下操作之一：

使用简单的样式创建警报效果（巨大的边框、明亮的红色等）
将映像上载到（可靠的）第三方服务。有几个
这样，您就不必依赖代码或服务器正常工作来确保警报正常工作，而您可能正试图通过此项目监视此警报。
您可以从数据定义背景：image。
检查：
或者