36

在我的布局之一中，有一些大图像（来自 XML），当我将鼠标悬停在某些链接上时会显示这些图像，但是当页面加载和翻转时加载该图像需要时间。

注意：有修复5张图片（非动态）

我不想使用 JavaScript 预加载图像任何解决方案？

我没有使用悬停菜单或类似的东西，但这个图像是产品图像，链接是文本链接明白我的意思了吗？

4

10 回答 10

54

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;
于 2013-09-16T17:55:54.157 回答
34

来自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();

}
于 2009-05-04T11:56:53.843 回答
33

无需预加载图像。我不明白为什么 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）

编辑：您也可以以其他方式使用它。您可以隐藏图像，而不是切换图像。所以起点是“背景位置：0 -100px”，悬停在“0 0”上。

这种技术被称为 CSS sprites - 这里有很好的描述：http ://css-tricks.com/css-sprites/

于 2009-05-04T09:12:18.683 回答
14

我还没有看到这里提到的一种技术，如果您不需要担心 IE6 和 7，它会非常有用，它是使用:after伪选择器将图像添加content到页面上的元素中。以下代码摘自本文：

body:after {
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
    display: none;
}

与使用 JavaScript 预加载图像相比，我能看到的唯一缺点是没有简单的方法可以从内存中释放它们。

于 2012-07-08T18:01:57.147 回答
13

您可以使用隐藏的 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 不会运行它。

于 2009-05-04T09:03:43.337 回答
3

在不可见的 img 标签中引用您的图像。在页面加载时，它们也会下载。

于 2009-05-04T09:00:28.463 回答
2

由于我不确定是否加载了隐藏图像，您可能需要使用图像精灵。然后在显示任何内容之前加载整个图像。您甚至可以将所有菜单项放在一张图像中，从而节省大量 HTTP 请求。

于 2009-05-04T09:20:44.343 回答
2

如果预加载图像是您所追求的，那么性能就是您想要的。我怀疑在资源加载是你想要的时候阻塞页面。所以，只需在正文的末尾放置一些预取链接并将虚假媒体添加到其中，以使它们看起来不重要（以便它们在其他所有内容之后被加载）。然后，将 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" />

请注意第一个（之前）如何冻结页面并以非常难看的方式闪烁，而第二个（之后）预加载内容并没有冻结页面或闪烁，而是立即无缝地出现和消失。

于 2017-04-21T01:22:28.370 回答
1

您不能将它们作为<img />标签添加到您的页面并使用 css 隐藏它们吗？

于 2009-05-04T09:01:16.370 回答
1 
<link rel="preload" as="image" href="..." />

当我们想为 CSS 提前加载图像时，这对我最有效（而 rel="prefetch" 会导致从 CSS 重复加载）

于 2021-07-05T14:52:56.930 回答