Google首页的CSS Sprite

2007年09月29日 - Google, 前端技术

如果你是一名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.com's CSS Sprite

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

23条留言

  1. Richbox - September 29th, 2007 at 17:52

    强

  2. peter - September 30th, 2007 at 1:12

    速度速度速度，都在追求速度～

  3. awflasher - September 30th, 2007 at 11:07

    这个图形之前同事提醒我看到过。但这段js没有注意：）
    其实，我也用了类似的方法在开发之中，只不过这段js，确实非常神奇：）

  4. March - September 30th, 2007 at 11:25

    哈哈。不过感觉以Google硬件条件，优化了和不优化对desktop的用户应该没啥差别。

  5. LuoboTixS - October 1st, 2007 at 9:15

    http://bbs.blueidea.com/viewthread.php?tid=2789659&extra=&page=2

  6. 原来是CSS Sprites呀 - 94smart's Blog - October 8th, 2007 at 11:39

    […] 最近一阵国内Blogger开始涉及CSS Sprites，是因为有人偶然发现Google搜索首页JS的秘密，之后我才知道去年Yahoo改版使用的技术原来就是这个，当时不知道怎么形容，只好套用软件资源图片的概念，看过Realazy的文章才大致理解，发现自己当时的理解还是太浅显，这是早在2005年就出现的技术呀。 […]

  7. 绿橙 UCD » 文章 » CSS Sprites（css小鬼） - October 9th, 2007 at 11:58

    […] http://hi.baidu.com/vivaid/blog/item/d9feb064842b43f3f736541e.html http://www.marchbox.com/blog/css-sprite-in-google-search/ […]

  8. greengnn - November 18th, 2007 at 23:24

    这种图片合并，所有图片纵排比较好管理，也容易使用，很多容器都是百分之百宽的。

    用png，白底还好，透明底就不行了，合并大都是小图片，质量要求地点没问题，还是透明gif比较好

  9. Sorryle - gadget.sorryle.com - November 30th, 2007 at 21:39

    考，这都被你发现了啊。

  10. Junyu - January 28th, 2008 at 21:48

    回March, 这个优化其实给桌面用户带来的提升是非常明显的.

  11. to:greengnn - April 6th, 2008 at 13:10

    你真的不知道PNG的图片可以透明？
    比gif要清楚好多的。好多网站开始用PNG了

  12. CSS Sprite | 长风破浪会有时 - April 7th, 2008 at 18:09

    […] Google 首页上的 CSS Sprite http://www.marchbox.com/blog/css-sprite-in-google-search/ […]

  13. to:(to:greengnn) - April 8th, 2008 at 15:32

    难道你真的不知道ie6不支持透明png？

  14. to{to:(to:greengnn)} - May 29th, 2008 at 9:51

    难道你真的不知道ie6不支持透明png是可以hack的?

  15. CSS Sprites | 细说网站 - August 22nd, 2008 at 10:17

    […] http://hi.baidu.com/vivaid/blog/item/d9feb064842b43f3f736541e.html http://www.marchbox.com/blog/css-sprite-in-google-search/ http://blog.94smart.com/2006/07/21/821.html […]

  16. to:(to{to:(to:greengnn)} ) - August 22nd, 2008 at 18:13

    难道你不知道ie下hack透明png是使用css滤镜的方法，这个对单个图片的背景没有问题。但是对使用了CSS Sprite（对多个图片的大图进行不同背景定位）的怎么使用滤镜？？？滤镜可不支持background-position哦

  17. margey - October 26th, 2008 at 1:06

    看看千鸟去年6月份写的“加速图片显示”
    http://blog.rexsong.com/?p=746

  18. 路人甲 - January 9th, 2009 at 22:58

    针对greengnn兄的回复还真是激烈啊…
    与其费事的IE 6透明PNG hack,不如直接转成GIF一了百了..

  19. 国光 - February 9th, 2009 at 17:38

    唉，这篇文章是07年的了，而这个技巧我现在才知道，真是落后

  20. 开心果 - February 12th, 2009 at 20:18

    以前看到过，就一直没研究过，惭愧啊·~

  21. hill - April 17th, 2009 at 11:53

    ie 6 不支援 png 的 “透明度” 但是支援 png 的透明底，有興趣的人請參考 png-8

  22. hill - April 17th, 2009 at 11:56

    雖然只能支援 透明底，但對取代gif 就已經綽綽有餘了， 不過前提是要把圖片存成 “png-8″

  23. 路人乙 - June 12th, 2009 at 14:51

    IE的PNGhack并不是非常麻烦
    利用PNG的ALPHA通道还是很爽的

留言：