在我的布局之一中，当我将鼠标悬停在某些链接上时会显示一些大图像（来自 XML），但是当页面加载时以及当我滚动时加载该图像需要时间。
注意：有固定 5 个图像（非动态）
我不想使用 JavaScript 来预加载图像 任何解决方案？
我没有使用悬停菜单或类似的东西，但此图像是产品图像，链接是文本链接明白我的意思了吗？？
如何在没有 Javascript 的情况下预加载图像？
IT技术
javascript
html
image-preloader
2021-03-14 18:34:46
6个回答
HTML5 有一种新方法可以做到这一点，通过link prefetching.
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
只需link在 HTML 中根据需要添加许多标签即可。当然，较旧的浏览器不会以这种方式加载内容。
注意 以上代码不适用于 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;
来自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 精灵 - 这里有很好的描述：http : //css-tricks.com/css-sprites/
我还没有看到这里提到的一种技术，如果您不需要担心 IE6 和 7，它会很好用，就是使用:after伪选择器将图像添加content到页面上的元素。以下代码摘自本文：
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
与使用 JavaScript 预加载图像相比，我能看到的唯一缺点是没有简单的方法可以从内存中释放它们。
您可以使用隐藏的 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 不会运行它。
其它你可能感兴趣的问题