優化圖片加載的方法


1、圖片懶加載  在頁面上的未可視區域可以添加一個滾動條事件,判斷圖片位置到瀏覽器頂端的距離和到頁面低端的距離,如果前者小於后者,優先加載。

2、如果為幻燈片、相冊等,可以使用圖片預加載技術,將當前展示圖片的前一張和后一張優先下載。

3、如果圖片為css圖片,可以使用CSSsprite,SVGsprite,Iconfont等技術。

4、如果圖片過大,可以使用特殊編碼的圖片,加載時會先加載一張壓縮的特別厲害的縮略圖,以提高用戶體驗。

5、如果圖片展示區域小於圖片的真實大小,則因在服務器端根據業務需要先行進行圖片壓縮,圖片壓縮后大小與展示一致。

如果是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   圖標字體

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM