加载文件时是否加载CSS文件中的每个图像？

比方说，我有我的整个网站的CSS在1个CSS文件，所以它是相当大的，我想知道，如果一个页面使用3类与下面的东西，请求从服务器的3个图像，可以说有像50这些在整个css文件中，是否每个人都从服务器调用/请求或只需要3个页面？加载文件时是否加载CSS文件中的每个图像？

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

来源

2009-08-19 JasonDavis

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

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

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

好的，我现在就自己做了。原来：不，它没有得到文件。（测试火狐3.5.2，IE7，Chrome浏览器2.0）

来源

2009-08-19 12:06:59 nickf

感谢您的测试，我想知道我是否应该切掉一些旧的/未使用的东西，但现在不会伤害太多 – JasonDavis 2009-08-19 12:15:30

您可以简单地使用Firefox中的NET选项卡，使用背景图像的元素... – 2009-08-19 12:16:58

@Itay，是的，或者我可以做到这一点，并跨浏览器进行测试;） – nickf 2009-08-19 12:21:21

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

来源

2009-08-19 12:02:06

你的答案在于萤火

来源

2009-08-19 12:08:58 Jeff

是的，没有。 Firebug不记录所有由Firefox制作的HTTP请求。例如，它不记录'favicon.ico'请求。 – 2009-08-19 12:14:19

@Ionut G. Stan：这是因为favicon被下载用作浏览器用户界面的一部分，因此被浏览器本身请求，而不是网页。所有与页面内容相关的请求，包括CSS背景图像，均由Firebug记录。那么，他们是如果它的工作;-) – NickFitz 2009-08-19 12:18:38

我不这么认为。在悬停时加载悬停伪类（鼠标悬停）所需的图像，并且在第一次出现时可能会有明显的延迟（除非您使用欺骗手段预加载）。

来源

2009-08-19 12:13:48

很好的例子情况+1 – JasonDavis 2009-08-19 12:45:09

不，只有当页面上存在类或id时，才会请求图像。

来源

2009-08-19 12:14:35 ErnieStings

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

来源

2009-08-19 16:03:35

加载文件时是否加载CSS文件中的每个图像？

回答

相关问题