如何仅使用CSS(不使用JS)预加载图像?
如何仅使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
使用 CSS Sprite。
Use CSS Sprites.
您可以使用多个元素,通过
background-position: -1000px -1000px;
隐藏,并为要预加载的每个图像提供一个background-image
。You can use multiple elements, hidden with
background-position: -1000px -1000px;
and give them abackground-image
for each image that you want to pre-load.您可以尝试在结束 body 标记之前加载它们,而不显示它们。然后,如果您稍后调用它们,如果您使用完全相同的路径,它们应该在缓存中。
您还可以使用 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.
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.