浏览器何时会下载样式表中定义的背景图像？答案

【问题标题】：When will the browser download the background images defined in a stylesheet?浏览器何时会下载样式表中定义的背景图像？
【发布时间】：2014-09-15 19:07:47
【问题描述】：

当CSS 声明包含有效的background-image 值时，何时会下载图像？这些图片是在解析样式表时下载的，还是在页面上实际应用声明时下载的？

换句话说，我是否会下载样式表中提到的所有图像，无论它们是否会被使用？

此外，是否有解决此问题的规范（如果有，是否尊重）还是留给用户代理？

【问题讨论】：

标签： css performance

【解决方案1】：

这篇文章有点旧（12 个月），但它可能会给你一个想法。

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

【讨论】：

【解决方案2】：

当您在样式表中声明 background-image 时，无论您在文档中调用该类或不调用该类，浏览器解析您的样式表时都会立即下载图像。

【讨论】：

这似乎不再是这种情况了，请参阅stackoverflow.com/questions/2396909/… 我自己做了一些测试，证实了上述延迟加载行为。当前的浏览器仅在规则匹配至少一个元素时才下载图像。顺便说一句，字体也是如此。
这是完全错误的。如果带有background-image 的元素的父元素被隐藏，则图像不会下载。这是几乎所有桌面和移动浏览器的一致行为。

【解决方案3】：

浏览器每次都更加智能。新的浏览器会检测屏幕大小并且不会为不适用的媒体查询下载图像：mediaqueries and images download

另外我刚刚发现，如果你说 #example{ background-image: "whatever.jpeg"} 并且元素 #example 不存在于 DOM 中，那么浏览器将不会下载该图像，因为我在这里阅读：Are unused CSS images downloaded?

当然要当心display:none;！您的响应式网站会下载这些隐藏元素的背景图片

【讨论】：