如何鼓励浏览器更快地从C​​SS文件下载图像？

我使用CSS放置了很多图片（作为的背景<div>），并且我经常发现它们以这种方式加载非常缓慢。它们似乎是最后加载的东西。即使很小的小图标图像也需要一段时间才能显示出来。有没有办法告诉浏览器图像优先级？还是让它更早下载CSS文件中的图像并更早呈现它们？

CSS是用于样式，而不是内容。浏览器（正确地）会在添加样式之前尝试显示内容，因此通常会最后下载样式表中的图像。如果图像对您的内容很重要，请通过标准HTML <IMG>标签添加它们。

使用样式表中的绝对URI ，并将IMG标签中的图像添加到<div>页面上的隐藏页面（这假设您在每个页面上都使用相同的图像；理想情况下，在页脚中将它们都加载并缓存在任何给定的页面调用中） ）。

页面上的图像具有优先权，一旦图像被缓存，它们将立即在后续页面请求中呈现。

对于支持数据URI类型的浏览器（有关信息，请参阅http://en.wikipedia.org/wiki/Data_Uri）以将图像包含在CSS本身中。

但是，这有一些缺点：

• 除非CSS定期更改，否则在CSS加载时会重新加载数据，而不是单独缓存数据。
• CSS缺乏继承性，这意味着您有时必须多次（包括浪费带宽）包括相同的图形或更改文档中使用的类。
• 图像以这种方式使用时是base64编码的，这意味着它们会占用更多带宽（尽管如果发送压缩的数据，带宽问题就不会那么重要了）。
• 您需要为不支持数据URI的浏览器提供替代样式，其中某些样式并非罕见（例如IE6和IE7）。

截至目前，尚无法指定先下载哪些文件。仅供参考，在CSS文件中指定为背景图像的图像最后下载是因为浏览器认为它们不包含内容，因此优先级较低，因此请避免将它们用于要快速加载的重要图像。

使用CSS精灵，尤其是图标。

使图像尽可能小。您可以使用smush.it删除不必要的字节。