在“我的布局”之一中，有一些大图像（来自 XML），当我将鼠标悬停在某些链接上时会显示这些图像，但是当页面加载和滚动时，加载该图像需要时间。
注意：修复了 5 张图片（非动态）
我不想使用 JavaScript 预加载图像任何解决方案？
我没有使用悬停菜单或类似的东西，但这个图片是产品图片，链接是文本链接明白了吗？？
【问题讨论】：
标签： javascript html image-preloader
HTML5 有一种新的方式来做到这一点，link prefetching。
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
只需在 HTML 中根据需要添加许多 link 标记即可。当然，旧版浏览器不会以这种方式加载内容。
注意 以上代码不适用于 Apple Safari Safari 不支持 prefetch 直到现在版本 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;
【讨论】：
来自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();
}
【讨论】：
无需预加载图像。我不明白为什么 99% 的人认为悬停效果必须使用 2 张图像。没有这样的需要，并且使用 2 张图像会使它看起来很糟糕。 我知道的唯一好的解决方案是对 A 元素使用 CSS（或对所有其他按钮使用简单的 JS）。当我们悬停按钮时，将背景位置设置为某个偏移量。
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }
就是这样，使用的图片如下：
（来源：margonem.pl）
编辑：您也可以以其他方式使用它。您可以隐藏图像，而不是切换图像。所以起点是“background-position:0 -100px”和悬停“0 0”。
这种技术被称为 CSS sprites - 这里有一个很好的描述：http://css-tricks.com/css-sprites/
【讨论】：
我还没有看到这里提到的一种技术，如果您不需要担心 IE6 和 7，它会非常有用，它是使用 :after 伪选择器将您的图像作为 content 添加到页面上的元素。下面的代码来自this article：
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
与使用 JavaScript 预加载图像相比，我能看到的唯一缺点是没有简单的方法可以从内存中释放它们。
【讨论】：
background-position: -100px -100px;。
您可以使用隐藏的 div 来放置图像。像这样
<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>
这仅适用于图像，即。如果您尝试对 .swf 文件执行相同操作，则会出现问题。如果 .swf 文件不可见，Firefox 不会运行它。
【讨论】：
在不可见的 img 标签中引用您的图像。在页面加载时，它们也会下载。
【讨论】：
由于我不确定是否加载了隐藏图像，您可能希望使用image sprites。然后在显示任何内容之前加载整个图像。您甚至可以将所有菜单项放在一张图片中，从而节省大量 HTTP 请求。
【讨论】：
如果预加载图像是您所追求的，那么性能就是您想要的。我怀疑在资源加载是你想要的时候阻塞页面。所以，只需在正文的末尾放置一些预取链接并将虚假媒体添加到其中，以使它们看起来不重要（以便它们在其他所有内容之后加载）。然后，将 onload 标记添加到这些链接，并且在该 onload 中将是设置页面中实际资源来源的代码。例如，这甚至可以与动态 iframe 结合使用。
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe><a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
onload="myFrame.src=this.href" media="bogus" />注意第一个（之前）如何冻结页面并以非常难看的方式闪烁，而第二个（之后）预加载内容并没有冻结页面或闪烁，而是立即无缝地出现和消失.
【讨论】：
您不能将它们作为<img /> 标记添加到您的页面并使用css 隐藏它们吗？
【讨论】：
<link rel="preload" as="image" href="..." />
当我们想为 CSS 提前加载图像时，这对我最有效 （而 rel="prefetch" 会导致 CSS 重复加载）
【讨论】：