優化圖片加載的方法

一、圖片懶加載  在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置到瀏覽器頂端的距離和到頁面低端的距離，若是前者小於後者，優先加載。

二、若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

三、若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont等技術。

四、若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

五、若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

若是是css圖片，如下爲主要技術的介紹：

CSS Sprites  其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字精確的定位出背景圖片的位置。

 

優勢

 

1.利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

 

2.CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

 

3.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

 

4.更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

 

缺點

 

誠然CSS Sprites是如此的強大，可是也存在一些不可忽視的缺點，以下：

 

1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；

 

2.CSS Sprites在開發的時候比較麻煩，你要經過PHOTOSHOP或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；幸虧騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，可是已經比photoshop測量來的方便多了，並且樣式直接生成，複製，拷貝就OK！

 

3.CSS Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

 

4.CSS Sprites很是值得學習和應用，特別是頁面有一堆icon（圖標）。總之不少時候你們要權衡一下利弊，再決定是否是應用CSS Sprites。

 

SVGsprite   避開使用位圖製做Sprite，來適應全部屏幕的顯示。而這種技術就是SVG的Sprite來替代早期的位圖Sprite。縮放不會失真

 

Iconfont   圖標字體