本帖最后由 neekin 于 2017-12-29 11:58 编辑
你要问我曾经做项目最痛苦的是什么? 我可以肯定的告诉你:当然是加载图片,图片,图片. 尤其到了节假日搞活动的时候,妈妈问我为什么跪着写代码? 挑剔的又神经质的产品经理又来催:这专题页面很简单啊,贴两张图就行了. 一口鲜血喷三尺,从此相逢陌路人. 自从做了web开发以后,研究了能各种提高网页打开的速度方法,而优化加载图片,是最能明显的提高网页打开速度,提高用户体验. 图片优化的一般方法- 减少图片体积大小
- 可以压缩优化图片
- 采用合适的图片格式 如: gif jpeg等
- 合并图片 减少HTTP请求
- 合成雪碧图
- 使用base64 但需要说明一点,如果直接将base64嵌入到html标签里面的话 图片数据不会缓存,可以利用将数据放进css或者js里面,达到间接缓存的 目的
优化过后,网页加载速度还是慢怎么办?如果你已经按照上面的方式做了,但网页加载速度还是慢,那么还有几种优化方式. - 进度条 loading效果
- 别笑,进度条可以明显的让人觉得等待的时光不那么无聊,显示一个进度条总比什么都不显示的体验远远好的多 (css生成进度条) 关键技术在于监听图片加载完成事件onload,图片加载完后,就可以关闭进度条或者loading了
2.懒加载 - 没错,就是字面的意思,懒得加载.懒加载可不是不加载哦,而是没显示到的地方不加载,先加载要显示的区域,而用户还没浏览的区域呢,就不去加载.
- 原理其实就是先让img标签的src属性设为一张体积很小的空白图片,将其真正的图片地址放在一个自定义属性里如data-src,当js监听这张图片进入可视区域的时候,再将自定义属性的值赋值到src里面,达到懒加载的目的.
希望这篇文章能给你一点点启发.
| 
收藏
淘帖
踩
