如果浏览器未使用，浏览器会缓存CSS背景图片吗？

当你有两个规则是这样的：如果浏览器未使用，浏览器会缓存CSS背景图片吗？

.foo { 
    background-image: url(foo.gif); 
} 

.foo { 
    background-image: url(bar.gif); 
}

，并有<div class='foo'>Foobar</div>

将在您的浏览器缓存两者，或只是一个实际上得到显示（在这种情况下bar.gif）？

这是真的在所有的设置？（规则在不同的文件中，!important被应用到一个，等等）

来源

2010-07-21 Jamie Wong

我假设这里的“缓存”，你的意思是“预加载”。实际的“缓存”与过期头文件等有关。

它完全基于浏览器的行为以及它选择做什么。然而，我的经验是，现代浏览器不会打扰加载CSS文件中定义的图像，除非实际调用图像。

这是一些选择将元素的默认值和悬停状态都设置为一个图像的原因，然后使用background-position属性更改可见的元素。开销较大，但在悬停和显示的悬停状态之间也没有延迟，从而获得更流畅的体验。

来源

2010-07-21 20:27:04 Matchu

感谢您在哪里可能会遇到的问题 - 很好的了解。 – 2010-07-21 20:29:37

最好，因为我可以告诉（与FireBug），它只拉取你显示的图像，而不是定义的。

来源

2010-07-21 20:24:09 joshtronic

如果两个规则具有相同的特征，则稍后将应用。在这里阅读更多关于specificity。

来源

2010-07-21 20:29:20 Developer

我知道应用哪一个 - 我甚至会说明在问题中显示哪一个。这不是问题所在。 – 2010-07-21 21:09:07

只有那些被应用的，才会被缓存。 – Developer 2010-07-21 21:28:43

浏览器在读取css时不加载图像，只是记住它们。当它开始渲染页面时，它开始加载图像。

所以在你的情况下，你已经覆盖你的css规则，并且当浏览器呈现页面时，它会忽略你的css规则，并且自然不会加载你的第一张图片。

来源

2010-07-21 20:30:52 Sinan

在我的本地Apache日志使用tail -f命令，我发现：

::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.html HTTP/1.1" 200 127 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.css HTTP/1.1" 304 - 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /bar.gif HTTP/1.1" 404 205

使用Firefox浏览器只试图加载“bar.gif”（这是404未找到，因为我没有”没有那个图像）。

如果您对其他浏览器感兴趣，我也可以测试它们。

来源

2010-07-21 20:31:04 direct00

+1 - 良好的测试方法 - 如果需要广泛测试，请牢记这一点。谢谢。 – 2010-07-21 21:08:49

如果浏览器未使用，浏览器会缓存CSS背景图片吗？

回答

相关问题