首页技术文章正文

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

更新时间: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/

最新资讯