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

Question

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

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

Answer 1

使用CSS Sprites。

Answer 2

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

• You can read more here

Answer 3

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

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

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

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