javascript - 前端为什么要使用占位图

Question

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

Answer 1

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

Answer 2

看起来好一点

Answer 3

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

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

Answer 4

• 可以标识出此处有图片但正在加载中的这一个状态，让体验更好。

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

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

Answer 5

本地化加载优先。