前端设计师应该知道的图片加载优化

来源:设计前沿收集 作者:乐在其中ing 时间:2017-12-19

图片是界面显示效果很重要的组成部分,图片加载关系到用户体验、应用性能,优化图片加载的常用策略为:预加载和懒加载。

预加载

图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要

css预加载

利用css的background属性可以预先加载图片,但不显示在屏幕位置内,使用这些图片时路径一致的话,浏览器会优先加载缓存内的图片进行显示,这样就达到了预加载的目的

前端图片加载优化

但是这种方式会在刚开始页面加载时影响其他内容显示,可以添加一些js

前端图片加载优化

纯js预加载

利用js实例化图片对象,再赋值应用地址,这样可以实现批量图片预加载

前端图片加载优化

懒加载

图片懒加载对于服务器可以起到缓解压力的作用。

前端图片加载优化

对于一些内容很长页面,我们希望当用户浏览到相应区域时再加载图片,常用的解决方法是在img元素上使用src属性替换src,判断img元素在用户可视区域时动态赋值src属性显示相应图片。

如果是图片墙形式页面,为避免开始加载全部图片需要给图片设置默认高度

前端图片加载优化

设置滚动事件

前端图片加载优化

滚动事件可以节流函数再进行优化

正确使用图片加载可以提高用户体验,保证页面的展示效果,同时又可以在一定程度上缓解服务器的压力,算是前端优化中经常涉及到的部分,了解其中的解决方法和策略可以帮助我们做出更好的产品。