双图片重叠解决首页大图加载慢的问题

双图片重叠解决首页大图加载慢的问题

• 我们在开发中会遇到登陆页或者首页需要加载一张高质量的大图，但是在网络极差的情况下回遇到加载白屏然后从上之下慢慢加载的情况，极大的影响了用户体验。
  

• 但是因为是首页，所以我没办法预加载，所以只能找个折衷的方法，先放一张低质量的相同图片占位，然后再加载高质量的图片从上至下覆盖。

• 从视觉上来看，这张背景图回从模糊到清晰的显示。

获得低质量图片

• 可在百度上搜索 webp 转换，将高质量图片转换为体机较小的 webp 格式的图片。

• 上代码

<!-- 低质量图片 -->
<img style="width: 100%;height: 100%;" src="@/static/img/loginbg.webp" /> 
<!-- 高质量图片 -->
<img style="width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;" src="@/static/img/loginbg.png" />