加载文件时，加载CSS文件中的每个图像都会加载吗？

Question

假设我将我的整个网站CSS放在1个css文件中，所以它相当大，我想知道一个页面是否使用3个类，如下面的内容请求来自服务器的3个图像，让我们说有类似的东西在整个css文件中有50个，每个人都可以从服务器调用/请求，还是只需要页面需要的3个？

background-image:url(http://localhost/images/btn3.gif);

Answer 1

有一种简单的方法可以找到（好吧，不仅仅是要求Stack Overflow）。把它放到一个CSS文件中：

#nonExistantElement {
    background-image: url(myScript.php);
}

并使该脚本通过写入文件或其他内容来记录命中。

---

好的，我现在就自己做了。事实证明：没有它没有得到文件。 （在Firefox 3.5.2，IE7，Chrome 2.0上测试）

Answer 2

我不这么认为。悬停时会加载悬停伪类（鼠标悬停）所需的图像，并且第一个外观可能会有明显的延迟（除非您使用作弊来预先加载它）。

Answer 3

浏览器将加载显示页面所需的内容。虽然我可以想象各种浏览器可以使用某些缓存技术并预取他们在CSS文件中看到的所有东西。

Answer 4

你的答案在于萤火虫

Answer 5

不，只有当页面上有类或id时才会对图像发出请求。

Answer 6

如果您 想要在页面加载时看不到的图像为“预加载”，那么您可以使用各种技巧，例如在加载时在屏幕外显示图像。需要“预加载”的最常见情况是在悬停时改变背景图像的情况，否则在用户第一次悬停并且导致图像改变时会出现不可接受的滞后。这个问题最常见的解决方案叫做“CSS Sprites”。您可以将默认，悬停和（如果存在）活动图像合并到一个文件中，一个在另一个上面，然后只需更改背景图像偏移：hover和：active。