如何在没有 Javascript 的情况下预加载图像？

Question

在我的一个 HTML 页面上，当我将鼠标悬停在某些链接上时会显示一些大图像，加载这些图像需要时间。

我不想使用 JavaScript 来预加载图像。有什么好的解决办法吗？

原文由 Wasim Shaikh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 http://snipplr.com/view/2122/css-image-preloader

一种仅使用 CSS 的技术含量低但很有用的技术。将 css 放入样式表后，将其插入到页面的 body 标记下方： 每当在整个页面中引用图像时，它们现在将从缓存中加载。

 #preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

原文由 Khurram Aziz 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

HTML5 通过 link prefetching 提供了一种新方法来做到这一点。

 <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

只需在 HTML 中根据需要添加尽可能多的 link 标签即可。当然，旧版浏览器不会以这种方式加载内容。

注意 以上代码不适用于 Apple Safari Safari 不支持预取直到现在版本 12 https://caniuse.com/#search=prefetch

更新

如果您的服务器使用 HTTP2，您还可以在响应中添加一个 Link 标头，使用 HTTP2 Server Push 。

 Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;

原文由 Luis Dalmolin 发布，翻译遵循 CC BY-SA 4.0 许可协议