加载图像以显示它们脱机

Question

如果用户失去连接,我已经创建了一个管理脱机状态的Web应用程序.为此,我向用户显示信息/错误/ ...消息以通知离线状态.

我的问题是警告消息中的某些图标或图像没有显示,因为当用户已经丢失连接时它们被加载...图像在CSS中而不是在html中:

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

如何在页面构造中预加载图像/图标以脱机使用它们？

注意:我不能使用HTML5离线功能(清单)因为我的目标用户在IE9上(不支持html5清单),并且由于个人原因我不能使用精灵......

谢谢你的帮助

Answer 1

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

这是一个例子

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