javascript - 加载图像以离线显示

Question

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

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

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

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

注意:我无法使用 HTML5 离线功能( list )，因为我的目标用户使用的是 IE9(不支持 html5 list )并且由于个人原因我无法使用 Sprite ...

谢谢你的帮助

Answer 1

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

举个例子

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