前端 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>