如何仅使用CSS(不使用JS)预加载图像?

发布于 2024-08-15 06:14:35 字数 82 浏览 7 评论 0原文

如何仅使用 CSS 而不使用 JavaScript 来预加载图像?它必须是跨浏览器的。

我不想使用 CSS 精灵。还有其他解决办法吗?

How can I pre-load images only using CSS, so without using JavaScript? It has to be cross-browser.

I don't want to use CSS sprites. Is there any other solution?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

贩梦商人 2024-08-22 06:14:35

您可以使用多个元素,通过 background-position: -1000px -1000px; 隐藏,并为要预加载的每个图像提供一个 background-image

You can use multiple elements, hidden with background-position: -1000px -1000px; and give them a background-image for each image that you want to pre-load.

吃→可爱长大的 2024-08-22 06:14:35

您可以尝试在结束 body 标记之前加载它们,而不显示它们。然后,如果您稍后调用它们,如果您使用完全相同的路径,它们应该在缓存中。

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

您还可以使用 display:none 创建一个类,并将其应用于您想要预加载的所有图像。

不过,这会产生更多的 HTTP 请求,如果你想减少这些请求,我建议你使用 CSS Sprites(如果你担心的话)。

You could try loading them all before the ending body tag and not display them. Then, if you call them later on they should be in the cache if you use the exact same path.

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

You can also make a class with display:none and apply that to all of the images you want to preload as well.

This would incur more HTTP requests though and if you want to cut down on those I suggest CSS Sprites if that ever concerns you.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文