图片预加载CSS Sprites

首先我要说的是博客园的速度打开的很慢,深圳南山的

如果你知道这种技术，那就不用进来了，

1.首先你先打开下面两个连接:(下面链接不是一般的图片，无毒无广告)


http://static.ak.facebook.com/images/sprite/icons.png?db3
http://www.google.com/images/nav_logo3.png

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

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

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

就是它：

Css Sprites，就是将页面中所有css装饰图合并成一个较大的图，然后用到特定的css装饰图的时候就利用css的background-image:大图,background-position:小图在大图中的x位置,小图在大图中的y位置


优点:利用Css Sprites可以提升网站的性能，普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

按照yahoo的 rules for high performance web sites的原则，应当较少Client与Server端间的HTTP Request次数。

通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求的次数。

关于更多的 CSS Sprites
http://www.handandaily.com/post/cat_8.html