loading...

利用CSS技巧减小HTTP请求

发布时间:June 26, 2008 分类:CSS

闲话各家开放平台

珍爱生命,远离懒惰

简介
这种技巧的名称叫做CSS Sprite,基本原理就是利用CSS中图片background系列的background-image、background-repeat、background-position等属性实现。通过这种方式达到图片显示加速的关键,不是降低重量,而是减少个数。在通常情况下一张图片的传输时间,通常远小于请求等待的时间。

PS:特别制作了三个CSS Sprites实例演示,感兴趣的朋友可以看一看。

实例
比如google.cn现在首页的底部导航也是用这个方式实现的。
所用图片为:http://www.ccvita.com/usr/uploads/demo/css/google.gif
效果:http://www.google.cn

代码
从网上找了好几个演示,大家可以看下面地址的演示:CSS Sprites实例演示
效果一:纵向背景图

最大化

最小化

效果二:横向背景图

颜色

链接

效果三:平滑投票

满分5.0, width:70px

  • Current rating: 4.7 (3 votes)
  • 1
  • 2
  • 3
  • 4
  • 5

当前2.5, width:35px

  • Current rating: 4.7 (3 votes)
  • 1
  • 2
  • 3
  • 4
  • 5

资料
本文在写作的过程中严重参考了如下文章:
CSS Sprites的实现
http://realazy.org/blog/2007/10/08/css-sprites/
加速图片显示
http://www.blueidea.com/tech/site/2007/4750.asp
利用CSS技巧减小HTTP请求
http://www.ccvita.com/322.html
Yahoo的YShow网站优化中的34条规则
http://developer.yahoo.com/performance/
CSS Sprites: Image Slicing’s Kiss of Death
http://alistapart.com/articles/sprites

Tags: 高负载, css


已有 4 条评论 »

  1. blankyao blankyao

    好像hainei,UCenterHOME都用这个技巧了

  2. 习明 习明

    @blankyao: dz也用了 虽然很少 很多网站或程序都用类似的技巧 比如做滑动门之类的效果

  3. Jeftom Jeftom

    这个早两年大力推广WEB标准的时候就已经开始使用了。。。

  4. kimi kimi

    @Jeftom 看来我是落伍了。。

添加新评论 »

captcha
请输入验证码