首頁技術文章正文

前端開發(fā)工程師：優(yōu)化圖片加載和提升用戶體驗

更新時間:2017年12月29日16時54分來源:傳智播客瀏覽次數:

你要問我曾經做項目最痛苦的是什么？

我可以肯定的告訴你：當然是加載圖片、圖片、圖片。

尤其到了節(jié)假日搞活動的時候，媽媽問我為什么跪著寫代碼？

挑剔的又神經質的產品經理又來催：這專題頁面很簡單啊,貼兩張圖就行了。

一口鮮血噴三尺，從此相逢陌路人。

自從做了web開發(fā)以后，研究了能各種提高網頁打開的速度方法，而優(yōu)化加載圖片，是最能明顯的提高網頁打開速度，提高用戶體驗。

圖片優(yōu)化的一般方法

減少圖片體積大小

可以壓縮優(yōu)化圖片

采用合適的圖片格式如: gif jpeg等

合并圖片減少HTTP請求

合成雪碧圖

使用base64 但需要說明一點，如果直接將base64嵌入到html標簽里面的話圖片數據不會緩存，可以利用將數據放進css或者js里面，達到間接緩存的目的。

優(yōu)化過后,網頁加載速度還是慢怎么辦？

如果你已經按照上面的方式做了,但網頁加載速度還是慢,那么還有幾種優(yōu)化方式。

進度條 loading效果

別笑,進度條可以明顯的讓人覺得等待的時光不那么無聊，顯示一個進度條總比什么都不顯示的體驗遠遠好的多 (css生成進度條) 關鍵技術在于監(jiān)聽圖片加載完成事件onload,圖片加載完后,就可以關閉進度條或者loading了。

2.懶加載

沒錯,就是字面的意思,懶得加載。懶加載可不是不加載哦，而是沒顯示到的地方不加載，先加載要顯示的區(qū)域，而用戶還沒瀏覽的區(qū)域呢，就不去加載。

原理其實就是先讓img標簽的src屬性設為一張體積很小的空白圖片,將其真正的圖片地址放在一個自定義屬性里如data-src,當js監(jiān)聽這張圖片進入可視區(qū)域的時候,再將自定義屬性的值賦值到src里面,達到懶加載的目的。

希望這篇文章能給你一點點啟發(fā)。

本文版權歸傳智播客前端與移動開發(fā)學院所有，歡迎轉載，轉載請注明作者出處。謝謝！

作者：傳智播客前端與移動開發(fā)培訓學院

首發(fā)：http://fskzgqt.cn/web/

最新資訊