优化css sprite背景图的下载

网站上使用的css sprite背景图带来的好处大家都明白，自不必多说。

前几天在测试网站的时候发现一个小问题：

系统环境：新网页，页面图片比较多且没有压缩，本地测试打开速度没有什么问题。

有天在家打开发现好长一段时间顶部的导航部分都是空白得（测试服务器在联通网络，家里是电信adsl），看了看css放在顶端了呀，firebug，发现css里面用到的背景图居然是在最后页面全部下载完成之后才下载的，为什么会这样？在网上找资料，找到一篇关于html页面加载顺序的文章，里面介绍了可以将css背景图放到前面加载的方式“加空<script></script>”，所以第二天上班就做了一下测试，但没有发现有什么变化。

突然，想到了一个把css背景图放到前面加载的办法：把logo添加的sprite图片里面，然后顶部logo肯定是在前面先下载的，这样sprite就可以优先下载了。

具体代码如下：

<a title="" class="" href="#">

<img class="" src="images/headerBg.png">

</a>

其中：a设置相对定位；img设置绝对定位，并用left & top 设置 logo 显示位置。

经测试，符合预期效果。

晚上回家路上想起，好像看过些文章介绍google的logo是放在sprite里面的，遂回家搜索，找到几篇文章只是介绍到可以实现logo放到sprite里面，没有更深的介绍（也许是我没有搜到）。

======================总结=====================

优点：1、可以减少一个http请求。

         2、可以提前下载sprite图，避免了有些网页造成的顶部sprite背景的短暂空白。

需要注意：实际应用中需要考虑页面logo部分图片src的路径问题。