推荐使用CSS Sprite

今天无意看到这技术，挺时髦的东西，两年前淘宝就已经在使用，看来我是比较落伍了，哈。google首页就采用了这种技术，把图片集中到一起，一次load分次调用,taobao，新浪，搜狐等都使用了此技术。 highlight,put it away for use later. 虽然以现行的网络速度1，200K大小的图片不影响速度，但如果能结合AJAX,CSS把速度再提升到极致，相信最终受益的还是terminal user.

如果你是一名Web Developer，而且还知道CSS Sprite这个词，请先去搜索一下（或者看看Realazy的这篇文章），也许你正在使用这个技术，但只是不知道它的名字罢了。

刚才在Google搜索的首页，发现在body的onload里有这么一句：

if(document.images){new Image().src='/images/nav_logo3.png'}

那么来看看这个http://www.google.com/images/nav_logo3.png是个啥？

就是它：

这就是Google搜索的CSS Sprite应用。图片文件中基本上包含了Google搜索结果页面用到的所有图形。这些图形被放在了同一个文件中（使得即使看起来是多个图片，但连接数 仍然为了1，减少了HTTP的连接数），而且在搜索首页预先加载，这样在搜索结果页面中就会更快速地将它们显示出来。

另外推荐一个网站 CSS Zengarden 此站把CSS Sprite使用到极致，哈，有能力的朋友们可以研究研究。