如何仅使用 CSS（无 JS）预加载图像？答案

【问题标题】：How to pre-load images only using CSS (no JS)?如何仅使用 CSS（无 JS）预加载图像？
【发布时间】：2009-12-15 05:33:46
【问题描述】：

如何仅使用 CSS 预加载图像，而不使用 JavaScript？它必须是跨浏览器的。

我不想使用 CSS 精灵。还有其他解决办法吗？

【问题讨论】：

【解决方案1】：

使用CSS Sprites。

【讨论】：

【解决方案2】：

您可以使用多个元素，使用 background-position: -1000px -1000px; 隐藏，并为您要预加载的每个图像指定一个 background-image。

【讨论】：

【解决方案3】：

您可以尝试在结束正文标记之前加载它们而不显示它们。然后，如果您稍后调用它们，如果您使用完全相同的路径，它们应该在缓存中。

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

您还可以使用 display:none 创建一个类，并将其应用于您要预加载的所有图像。

这会产生更多的 HTTP 请求，如果你想减少这些请求，我建议你使用 CSS Sprites。

【讨论】：