Javascript 正在加载图像以脱机显示它们

我制作了一个web应用程序，它可以在用户失去连接时管理脱机状态。为此，我显示信息/错误/。。。向用户发送有关脱机状态的消息

我的问题是警告消息中的一些图标或图像没有显示，因为它们是在用户已经失去连接时加载的。。。 图像在CSS中，而不是在html中：

.warning
{
background: #FFE680 url(../images/ico_warning.png) no-repeat 10px center / 18px;
}

如何在页面构建时预加载图像/图标以脱机使用

注：我不能使用HTML5离线功能（清单），因为我的目标用户在IE9上（HTML5清单不受支持），并且出于个人原因，我不能使用精灵

---

感谢您的帮助

您所能做的就是将所需的图像作为

背景图像

分配给页面上的元素。比如标题或边栏（当然，如果它们没有图像作为背景）

技巧是将

背景重复

属性设置为

不重复

，将

背景位置

设置为

-999em-999em

。因此，图像将被下载，但在视觉上是隐藏的。

好的， 我找到了一种离线加载图像的方法。 因为CSS在任何情况下都是完全加载的，如果我将图像作为base64字符串放入CSS中，它就不需要连接来显示它

这里有一个例子

.warning{
background: #FFE680 url('data:image/png;base64,iVBORw0KGgoAA_complete_base64_string_here...') no-repeat 10px center / 18px;
}

---

hack：用img标签在页面上添加一个隐藏的div。使用javscript在检测到脱机状态时拉出该图像。好的，这似乎是一种黑客攻击。但是我不想直接在页面中添加未使用的元素，所以我用内容中的所有img初始化了messagebox。当显示消息时，我将用消息替换框中的全部内容，因此不会显示图像。谢谢你的帮助你好，我尝试过这个解决方案，但我认为它不适合我的情况。使用这个解决方案，我将“污染”CSS，因为我有多个图像。。。无论如何，谢谢你的回复。是的，你要么“污染”你的html或css。。取决于您：）我更喜欢我的变体，因为它不需要任何特殊的html元素或任何javascript魔术