传智播客旗下品牌:  黑马程序员  |  博学谷  |  传智专修学院

一样的教育,不一样的品质     全国咨询热线:400-618-4000

前端开发工程师:优化图片加载和提升用户体验

更新时间:2017年12月29日16时54分 来源:传智播客

你要问我曾经做项目最痛苦的是什么?

我可以肯定的告诉你:当然是加载图片、图片、图片。

尤其到了节假日搞活动的时候,妈妈问我为什么跪着写代码?

挑剔的又神经质的产品经理又来催:这专题页面很简单啊,贴两张图就行了。

一口鲜血喷三尺,从此相逢陌路人。

自从做了web开发以后,研究了能各种提高网页打开的速度方法,而优化加载图片,是最能明显的提高网页打开速度,提高用户体验。

图片优化的一般方法

减少图片体积大小

可以压缩优化图片

采用合适的图片格式 如: gif jpeg等

合并图片 减少HTTP请求

合成雪碧图

使用base64 但需要说明一点,如果直接将base64嵌入到html标签里面的话图片数据不会缓存,可以利用将数据放进css或者js里面,达到间接缓存的目的。

优化过后,网页加载速度还是慢怎么办?

如果你已经按照上面的方式做了,但网页加载速度还是慢,那么还有几种优化方式。

进度条 loading效果

别笑,进度条可以明显的让人觉得等待的时光不那么无聊,显示一个进度条总比什么都不显示的体验远远好的多 (css生成进度条) 关键技术在于监听图片加载完成事件onload,图片加载完后,就可以关闭进度条或者loading了。

2.懒加载

没错,就是字面的意思,懒得加载。懒加载可不是不加载哦,而是没显示到的地方不加载,先加载要显示的区域,而用户还没浏览的区域呢,就不去加载。

原理其实就是先让img标签的src属性设为一张体积很小的空白图片,将其真正的图片地址放在一个自定义属性里如data-src,当js监听这张图片进入可视区域的时候,再将自定义属性的值赋值到src里面,达到懒加载的目的。

希望这篇文章能给你一点点启发。

本文版权归传智播客前端与移动开发学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客前端与移动开发培训学院
首发:http://www.itcast.cn/web/