1. 程式人生 > >整合碎圖提高頁面下載速度

整合碎圖提高頁面下載速度

如果一個網頁中包含的圖片數目很多,在下載頁面的時候必然會增加了客戶端訪問時的連線請求次數和檔案尺寸。

可以通過將各零碎的圖片合成到一整張圖片,然後在程式碼中通過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就是裁掉多餘部分。

好了,自己動手做吧。