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

评论

CSS精灵回答您其他问题的方法也可能也有助于解决这一问题。

#1 楼

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

评论

很好的建议，尤其是最后一句话。装饰图片：CSS；内容图片：HTML。

–心怀不满的山羊
2010年8月16日15:19
Daniel对他所指图像的描述（“背景”，“图标”）使它们听起来很像装饰，而不是内容。我认为加入CSS是正确的。

– Bobby Jack
2010年8月17日在17:07

#2 楼

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

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

#3 楼

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

这有一些缺点：


CSS时会重新加载数据，而不是分别进行缓存，尽管除非CSS定期更改，否则这并不是什么大问题。
CSS缺乏继承并且这样就意味着有时可能不得不浪费时间（多次浪费带宽），或者多次更改同一文档中使用的类。
以这种方式使用时，图像是base64编码的，这意味着它们会占用更多带宽（尽管如果您发送压缩后的数据，带宽问题就不那么重要了。
您需要为不支持数据URI的浏览器提供其他样式，其中有些样式并非罕见（IE6和IE7对于实例）。


#4 楼

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

#5 楼

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

#6 楼

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