官网等展示型网站，需要加载高清大图时，受服务器服务器带宽、用户网络等因素，导致不能及时加载，用户体验不好。

核心思路：模糊到清晰。

解决方案：

1.jpeg渐进式图片（主ui）。

2.前端自己去做，准备两张图（主前端）。

// 方案二 前端主导
<script setup lang="ts">
import { onMounted, ref } from "vue"
 
const isLoad = ref(true)
let imgTarget: HTMLImageElement
const imgLoad = () => {
  const img = document.createElement("img")
  img.src = "http://dayisec.com/_nuxt/banner.D0UCGFPf.png"
  img.onload = function () {
    console.log("加载完毕", this)
    imgTarget.src = "http://dayisec.com/_nuxt/banner.D0UCGFPf.png"
    isLoad.value = false
  }
}
 
onMounted(() => {
  imgTarget = document.getElementById("imgId")
  imgTarget.setAttribute('class', 'is-load load')
  imgLoad()
})
</script>
 
<template>
  <div class="container">
    <h6>模糊到清晰</h6>
    <img
      id="imgId"
      class="is-load"
      src="../../assets/images/help/help-bg.png"
      alt=""
    />
  </div>
</template>
 
<style scoped lang="scss">
.container {
  width: 100vw;
  margin: 0 auto;
  img {
    display: block;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .is-load {
    filter: blur(4px);
    transition: all 0.7s;
  }
  .load {
    filter: blur(0);
  }
}
</style>