CSS圖片加載優化方案

寫在前面的話：

圖片在頁面元素中相對是比較占用帶寬的存在，那么優化圖片往往能肉眼可見的提高頁面加載的速度，以下總結的四種關於優化圖片加載的方案。

1. CSSSprite 減少對服務器請求
2. SVGSprite 體積小，矢量
3. Iconfont 體積小，矢量，集成度高
4. Base64 減少對服務器請求

 一.CSSSprite 減少對服務器請求

CSS Sprites 技術就是將這些小icon合並成一張圖片,只需要加載一次,每次通過background-position來控制顯示icon,這樣就可以節約大量請求,節約成本.此方案是將網站上的一些小logo拼合成一個大圖,如圖：

然后通過 background-position 就可以定位到圖標的位置了，css舉例如下：

.icon-mapselect{
    background:url('../realtime/default/icon-realtime.png') no-repeat 0px -272px;
    width:18px;
    height:18px;
}

 二.Base64 減少對服務器請求

使用base64編碼的圖片的優點在於可以減少http請求，也不占用服務器的內存資源，缺點在於base64格式的圖片比原圖大，占用了更多的存儲空間，而且瀏覽器不會對該資源進行緩存。

實現方式：

1、將要圖片轉為base64的文字編碼

使用該網站可以在線將圖片轉為base64格式 https://www.sojson.com/image2base64.html,以下是網站使用方法：

 

轉好之后就可以在項目中使用了。以下是使用舉例：

 

效果圖：

 三.Iconfont 圖標

這里推薦使用阿里巴巴矢量圖標庫 訪問網站請瘋狂點擊 這里

使用步驟：

1.查找心儀的圖標

 

 2.加入購物車：

 

 3.進入購物車

 

4.添加至項目

 

 5.進入我的項目

 

6.選擇Unicode,Fontclass,Symbol中的一種下載下來

7.解壓下載的安裝包后的文件內容如下：

8.打開demo_index.html 可以看到具體的引用步驟

 

 四.圖片懶加載

 圖片懶加載是一種網頁優化技術。圖片作為一種網絡資源，在被請求時也與普通靜態資源一樣，將占用網絡資源，而一次性將整個頁面的所有圖片加載完，將大大增加頁面的首屏加載時間。為了解決這種問題，通過前后端配合，使圖片僅在瀏覽器當前視窗內出現時才加載該圖片，達到減少首屏圖片請求數的技術就被稱為“圖片懶加載”。

意義： 懶加載的主要目的是作為服務器前端的優化，減少請求數或延遲請求數。

實現方式：

1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.

2.第二種是條件加載，符合某些條件，或觸發了某些事件才開始異步下載。

3.第三種是可視區加載，即僅加載用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離前開始加載，這樣能保證用戶拉下時正好能看到圖片。