加载图像以显示它们脱机

Question

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

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

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

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

N.B：我无法使用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;
}

Answer 2

您可以做的是将所需的图像作为background-image分配给页面上的元素。像标题或侧边栏（如果他们当然没有图像作为背景）。

诀窍是将background-repeat属性设置为no-repeat，将background-position设置为-999em -999em。因此，图像将被下载但在视觉上隐藏。