前端为什么要使用占位图

于梦中2010
  • 2k

前端为什么要使用占位图
1.一开始以为用占位图可以将元素的长宽很快的加载出来,避免原图加载过慢导致页面的重排与重绘,提高页面性能。那我给image,定义个width和height不就可以解决了了么,难道占位图就为了美观?
2.不使用占位图,图片没加载完是不是会影响js部分,也就是说window.onload或$(docunment).ready是要在图片在加载完才会有响应

回复
阅读 7.8k
5 个回答
  • 可以标识出此处有图片但正在加载中的这一个状态,让体验更好。

  • 更快的整体文档加载速度,更快的响应js。

  • 预占位,让图片加载完成后渲染出来不改变文档的整体布局,性能优化。(需要预占位图和真图片的展示大小一致)

1.用户体验好
2.避免回流,dom,style的改变会造成回流或者重绘,例如,修改style的background-color会造成重绘,但修改dom的宽高位置等会造成回流,就是重新布局。回流比重绘更消耗性能,所以用占位图来避免回流,重绘就行。

看起来好一点

好处1: 对于是后台传入的图片,而非静态图片的时候,就不需要切图了,直接用在线占位图,节约了时间

好处2:占位图直接显示了图片的尺寸。比较直观

爱编程的小伙
  • 3
新手上路,请多包涵

本地化加载优先。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏