整合碎图提高页面下载速度

如果一个网页中包含的图片数目很多，在下载页面的时候必然会增加了客户端访问时的连接请求次数和文件尺寸。

可以通过将各零碎的图片合成到一整张图片，然后在代码中通过DIV、CSS裁剪或绘制出需要的部分，这样的话只请求一次就得到了页面中所有碎图的集合，大大减少了连接请求次数。

 

实现方法：

如果作为背景可以使用CSS进行背景定位：

background-position:-10px -20px;

 

作为图片显示可以使用DIV+CSS clip进行裁切：

先制作一个放置图片的DIV外框，CSS定义加上：

position:relative;

可以加上DIV尺寸定义等。

然后图片CSS定义：

position:absolute;

clip:rect(10px 20px 10px 20px);

clip就是裁掉多余部分。

 

好了，自己动手做吧。