将图片加载以便离线显示

Question

我制作了一个Web应用程序，可以管理用户失去连接时的离线状态。为此，我向用户显示信息/错误/...消息，以通知其处于脱机状态。

我的问题是，在警告消息中，某些图标或图像由于在用户已经失去连接时加载，所以无法显示。这些图像在CSS中而不是在HTML中：

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

我该如何在页面构建时预加载图片/图标以便离线使用？

注：我无法使用HTML5离线功能（清单），因为我的目标用户使用的是IE9（不支持HTML5清单），并且出于个人原因我不能使用雪碧图...

谢谢您的帮助。

- ylerjen

---

黑客攻击：使用 img 标记将一个隐藏的 div 附加到您的页面上。当检测到离线状态时，使用 javscript 提取该图像。 - Selvam Palanimalai

好的，这种黑客方式似乎可以工作。但我不想直接在页面中添加未使用的元素，所以我用内容中的所有img初始化了消息框。当消息显示时，我用我的消息替换整个框的内容，这样图片就不会显示出来了。感谢您的帮助。 - ylerjen

Answer 1

好的，我找到了一种离线加载图像的方法。因为CSS无论如何都会完全加载，如果我将图像作为base64字符串放在CSS中，它就不需要连接即可显示。

以下是一个示例：

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

- ylerjen

Answer 2

你可以将需要的图像分配为页面上存在的元素的background-image。例如标题或侧边栏（如果它们没有图像作为背景）。

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

- skip405

---

你好，我尝试了这个解决方案，但我认为它在我的情况下不太合适。使用这个解决方案会“污染”CSS，因为我有多个图片...无论如何，感谢您的回复。 - ylerjen

是的，你可以“污染”你的HTML或CSS..由你决定 :) 我更喜欢我的变体，因为它不需要任何特殊的HTML元素或任何JavaScript魔法。 - skip405