当前位置：文江博客话题详情

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

发布于 2024-07-19 00:46:08 字数 109 浏览 6 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

〃安静 2024-07-26 00:46:08

HTML5 有一种新方法可以做到这一点，即链接预取。

<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

UPDATE

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

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

HTML5 has a new way to do this, by link prefetching.

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

Just add as many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.

Note
Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch

UPDATE

If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.

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

回复收藏 0 原文

莳間冲淡了誓言ζ 2024-07-26 00:46:08

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

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

#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();

}

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

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.

#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();

}

回复收藏 0 原文

昔梦 2024-07-26 00:46:08

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

There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad.
The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }

That's all, image used you can see below:

_{(source: margonem.pl)}

Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".

This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/

回复收藏 0 原文

百思不得你姐 2024-07-26 00:46:08

我在这里还没有看到提到的一项技术，如果您不需要担心 IE6 和 IE6，那么该技术非常有用。 7、使用 :after 伪选择器将图像作为 content 添加到页面上的元素。下面的代码摘自本文：

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

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

A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:

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

The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.

回复收藏 0 原文

风情万种。 2024-07-26 00:46:08

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

You could use a hidden div to put images in. Like so

<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>

This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.

回复收藏 0 原文

漆黑的白昼 2024-07-26 00:46:08

<link rel="preload" as="image" href="..." />

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

<link rel="preload" as="image" href="..." />

This works best for me when we want to load image early for CSS
(while rel="prefetch" will cause duplicate loading from CSS)

回复收藏 0 原文

痞味浪人 2024-07-26 00:46:08

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

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

If preloading images is what you seek, then performance is what you want. I doubt blocking up the page while the resources load is what you want. SO, just place some prefetching links at the end of the body and add the bogus media to them to make them appear unimportant (so that they get loaded after everything else). Then, add the onload tag to those links, and in that onload will be the code that sets the source of the actual resource in your page. For example, this could even be used in conjunction with dynamic iframes.

Before:

<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>

After:

<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" />

Notice how the first one (before) freezes up the page and blinks in a quite ugly manner while the second one (after) with the content preloaded doesn't freeze up the page or blink, rather it appears and disappears seamlessly instantly.

回复收藏 0 原文