前端 CSS 经典：在 Vue3 中使用渐进式图片

1. 什么是渐进式图片

当我们网站会加载很多图片的时候，有些图片尺寸很大，加载就会很慢，会导致页面长时间陷入白屏状态，用户体验很不好。所以可以使用渐进式图片，先给用户展示模糊图，这些图尺寸小，加载快，可以快速显现出来。然后再逐步传输大图，大图传输完成之后替换模糊图。这就是渐进式图片。 

2. 实现方式

有两种方案，一种靠设计师，一种靠自己

2.1 靠设计师

直接让设计师给你渐进式图片，因为 jpg 图片支持多帧，设计师可以在第一帧放一个模糊图，在第二帧放高清图。在传输的时候，浏览器首先会收到模糊图并展示，然后再慢慢传输高清图，一步一步去替换模糊图。但是这有两个缺陷，一个是浏览器兼容，还有一个是设计师不干或者不会。

2.2 靠自己

我们构建一个 ProgressiveImg.vue 组件，实现渐进式图片。实现思路是传入两个图片，一张模糊，一张高清，高清图片加载完成后触发替换。

ProgressiveImg.vue 组件构建

<script setup>defineProps({placeholder: String,origin: String,});const handleLoaded = (e) => {e.target.parentElement.classList.add("loaded");};
</script><template><div class="progressive"><img class="img placeholder" :src="placeholder" /><img @load="handleLoaded" class="img origin" :src="origin" /></div>
</template><style scoped>.progressive {width: 100%;height: 100%;position: relative;}.img {width: 100%;height: 100%;display: block;object-fit: cover;transition: all 0.6s;}.origin {opacity: 0;position: absolute;left: 0;top: 0;filter: blur(10px);}.loaded .origin {opacity: 1;filter: blur(0);}
</style>

使用 ProgressiveImg.vue 组件

<script setup>import ProgressiveImg from "./components/ProgressiveImg.vue";import small from "./assets/_bg.jpg";import big from "./assets/bg.jpg";
</script><template><div class="contain"><ProgressiveImg :placeholder="small" :origin="big" /></div>
</template><style>body {margin: 0;padding: 0;}.contain {width: 100vw;height: 100vh;}
</style>