更新時(shí)間:2017-12-29 來源:黑馬程序員 瀏覽量:
你要問我曾經(jīng)做項(xiàng)目最痛苦的是什么?
我可以肯定的告訴你:當(dāng)然是加載圖片、圖片、圖片。
尤其到了節(jié)假日搞活動(dòng)的時(shí)候,媽媽問我為什么跪著寫代碼?
挑剔的又神經(jīng)質(zhì)的產(chǎn)品經(jīng)理又來催:這專題頁面很簡單啊,貼兩張圖就行了。
一口鮮血噴三尺,從此相逢陌路人。
自從做了web開發(fā)以后,研究了能各種提高網(wǎng)頁打開的速度方法,而優(yōu)化加載圖片,是最能明顯的提高網(wǎng)頁打開速度,提高用戶體驗(yàn)。
圖片優(yōu)化的一般方法
減少圖片體積大小
可以壓縮優(yōu)化圖片
采用合適的圖片格式 如: gif jpeg等
合并圖片 減少HTTP請(qǐng)求
合成雪碧圖
使用base64 但需要說明一點(diǎn),如果直接將base64嵌入到html標(biāo)簽里面的話圖片數(shù)據(jù)不會(huì)緩存,可以利用將數(shù)據(jù)放進(jìn)css或者js里面,達(dá)到間接緩存的目的。
優(yōu)化過后,網(wǎng)頁加載速度還是慢怎么辦?
如果你已經(jīng)按照上面的方式做了,但網(wǎng)頁加載速度還是慢,那么還有幾種優(yōu)化方式。
進(jìn)度條 loading效果
別笑,進(jìn)度條可以明顯的讓人覺得等待的時(shí)光不那么無聊,顯示一個(gè)進(jìn)度條總比什么都不顯示的體驗(yàn)遠(yuǎn)遠(yuǎn)好的多 (css生成進(jìn)度條) 關(guān)鍵技術(shù)在于監(jiān)聽圖片加載完成事件onload,圖片加載完后,就可以關(guān)閉進(jìn)度條或者loading了。
2.懶加載
沒錯(cuò),就是字面的意思,懶得加載。懶加載可不是不加載哦,而是沒顯示到的地方不加載,先加載要顯示的區(qū)域,而用戶還沒瀏覽的區(qū)域呢,就不去加載。
原理其實(shí)就是先讓img標(biāo)簽的src屬性設(shè)為一張?bào)w積很小的空白圖片,將其真正的圖片地址放在一個(gè)自定義屬性里如data-src,當(dāng)js監(jiān)聽這張圖片進(jìn)入可視區(qū)域的時(shí)候,再將自定義屬性的值賦值到src里面,達(dá)到懶加載的目的。
希望這篇文章能給你一點(diǎn)點(diǎn)啟發(fā)。
本文版權(quán)歸黑馬程序員前端與移動(dòng)開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:黑馬程序員前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院
首發(fā):http://web.itheima.com/