仅使用 CSS 预加载图片 | CSS-Tricks

使用图片预加载的一个主要原因是，如果你想在鼠标悬停或 :hover 事件中使用图片作为元素的背景图片。如果你只在 CSS 中为 :hover 状态应用该背景图片，那么该图片将不会加载，直到第一次 :hover 事件发生，因此鼠标悬停到该区域后，图片实际上显示出来之间会有短暂的烦人的延迟。

技巧 #1

在元素的常规状态下加载图片，只需使用背景位置将其移开。然后移动背景位置以在悬停时显示它。

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

技巧 #2

如果相关的元素已经应用了背景图片，并且你需要更改该图片，上面的方法将不起作用。通常你会在这里使用一个精灵图（一个组合的背景图片），只需移动背景位置即可。但如果这不可能，请尝试以下方法。将背景图片应用到另一个已经使用但没有背景图片的页面元素。

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }

创建新页面元素以用于此预加载技术的思想可能会出现在你的脑海中，比如 #preload-001、#preload-002，但这有点违背了 web 标准的精神。因此，可以使用页面上已存在的页面元素。

我曾经想过尝试使用相同的元素，只是使用 :after 伪类加载图片，这样你就不需要依赖于页面上有足够的没有背景的图片来使用，但出于某种原因，它不想正确预加载它们。

查看这篇文章，了解一些其他技巧，包括 JavaScript。

Tony

# 2009 年 12 月 30 日

上面提到的技巧很有趣。我以前用过 JavaScript 来实现这一点，但 CSS 预加载更容易实现，并且完全兼容浏览器。

可以在以下位置找到另一种使用 CSS 预加载图片的方法 http://www.prismgraphicdesign.co.uk/blog/?p=12

Josh L

评论永久链接# 2010 年 1 月 4 日

Tony，你的技巧在任何现代浏览器中都无法使用。当应用于 display 属性为 “none” 的元素时，内联图片和背景图片都不会加载。

Home Design Mild

# 2011 年 1 月 3 日

我不明白

Aaron

# 2011 年 2 月 9 日

这对我很有效。感谢你的好主意。

cnwtx

# 2011 年 5 月 19 日

你也可以使用这个

#something:before
		{content: url("./img.jpg");
		 width:0;
		 height:0;
		 visibility:hidden;}

这将缓存图片，以便随时使用。

David Sawyer

评论永久链接# 2014 年 2 月 10 日

我喜欢这个解决方案！但我最终不得不包含 position: absolute; 来防止伪元素影响我的布局。
Jef

评论永久链接# 2014 年 3 月 26 日

这对于 IE8 及更低版本将无法使用，因为 :before/:after 不支持，非常不幸。如果你不担心支持那么久远，那么这也将有效。

Fred

# 2011 年 12 月 28 日

在 cnwtx 的示例中，如果我们使用 “display:none;” 而不是 “visibility:hidden;”，图片也会被缓存吗？

#something:before
 {content: url("./img.jpg");
                 width:0;
                 height:0;
                 display:none;}

提前感谢。

jibiel

评论永久链接# 2012 年 9 月 23 日

很明显——是的，对我来说有效。感谢 @cnwtx！

匿名

# 2012 年 6 月 27 日

我无法将此方法粘贴到评论中，但这里有一个我找到的优秀方法

http://www.netmechanic.com/news/vol6/css_no18.htm

Auz

# 2013 年 2 月 12 日

如果你要创建一个 div 会怎么样？然后赋予它多个背景。

.bg-preloader-div{
    background: url(/images/button-criminal-defense-hover.png) no-repeat;
    background: url(/images/button-dui-hover.png) no-repeat;
    background: url(/images/button.png) no-repeat;
    width:0;
    height:0;
    display:none;
}

nitin

# 2013 年 7 月 9 日

http://waytohtml5.blogspot.in/2013/07/preloader-using-css3-without-image.html

Pepe.pro

# 2013 年 10 月 18 日

技巧 #2，真聪明！

Jan

# 2014 年 4 月 13 日

感谢 cnwtx，你的解决方案对我很有效。

Erick

# 2014 年 4 月 26 日

我不明白！

Diseño Web

# 2015 年 4 月 29 日

好解决方案，感谢！

21paradox

# 2015 年 5 月 4 日

基于上面的解决方案。

&:before{
     content: '';
     background: url(../img/[email protected]), url(../img/[email protected]), url(../img/[email protected]),url(../img/[email protected]),url(../img/[email protected]);
     width:0;height:0;visibility:hidden;
}

许多浏览器现在支持多个背景。

https://caniuse.cn/#search=Multiple%20Backgrounds

很棒的解决方案！但对我来说不起作用……

# 2016 年 6 月 7 日

喜欢这些解决方案。我肯定会尝试一下。但对于我的问题，我仍然束手无策。如何在当前页面实现呢？我的悬停使用两张背景图片。

技巧 #1

技巧 #2

更多

评论

发表评论 取消回复

发表评论取消回复