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>
