5

如果用户失去连接，我制作了一个管理离线状态的 Web 应用程序。为此，我向用户显示信息/错误/...消息以告知离线状态。

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

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

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

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

谢谢你的帮助

4

2 回答 2

2

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

这是一个例子

.warning{
background: #FFE680 url('data:image/png;base64,iVBORw0KGgoAA_complete_base64_string_here...') no-repeat 10px center / 18px;
}
于 2013-10-02T09:00:19.077 回答
0

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

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

于 2013-09-10T08:08:44.087 回答