大屏项目：背景图片切换出现闪屏情况

// vue2实现
<template>
  <div class="background" :style="{ backgroundImage: `url(${backgroundImage})` }"></div>
  <button @click="changeBackground">切换背景</button>
</template>

<script>
export default {
  data() {
    return {
      backgroundImage: '',
      newBackgroundImage: '/path/to/new/image.jpg', // 新的背景图片路径
    };
  },
  methods: {
    preloadImage(src) {
      return new Promise((resolve) => {
        const img = new Image();
        img.onload = () => resolve(src);
        img.src = src;
      });
    },
    async changeBackground() {
      // 预加载新的背景图片
      await this.preloadImage(this.newBackgroundImage);

      // 设置新的背景图片
      this.backgroundImage = this.newBackgroundImage;
    },
  },
};
</script>

<style>
.background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
</style>

// vue3实现方法
<template>
  <div class="large-screen-body" :style="largeScreenStyle">
    <div class="panel-header-wrap">
      <div class="title-wrap">
        <div class="logo-wrap">
          <img class="logo-item" src="/static/img/logo.png" alt="" />
        </div>
        <div class="line"></div>
        <div class="logo-title">{{ panelTitle }}</div>
      </div>
    </div>

    <div class="panel-body-wrap" :style="panelBodyWrapStyle">
      <Swiper
        class="main-swiper-wrap"
        :modules="modules"
        :pagination="true"
        :autoplay="{ delay: 100 }"
        @slideChange="panelChange"
      >
        <SwiperSlide>
          <FirstPanel />
        </SwiperSlide>
        <SwiperSlide>
          <SecondPanel />
        </SwiperSlide>
      </Swiper>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, useCssModule, provide, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { Pagination } from 'swiper/modules' // 分页器
import { panelRootKey } from '@/utils/keys.js'
import { getScale, designHeight } from '@/utils/getScale.js'
import FirstPanel from './first/index.vue'
import SecondPanel from './second/index.vue'

const backUrl = {  // 1.定义图片路径
  0: '/static/img/knowledge_bg.png',
  1: '/static/img/hight_level_bg.png'
}
useCssModule()
const modules = [Pagination]

// data
let panelIndex = ref(0) // 当前屏幕的位置
let backgroundImage = ref('/static/img/knowledge_bg.png') // 2.设置双向绑定默认图片路径
provide(panelRootKey, ref(panelIndex))

const preloadImage = (src) => {  // 3. 编写切换时异步方法
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(src)
    img.src = src
  })
}
const largeScreenStyle = computed(() => {
  return {
    'background-image': `url(${backgroundImage.value})`, // 6.行内样式使用实际背景图片路径
    transform: `scale(${getScale()[0]}, ${getScale()[1]}) translateX(-50%)`,
    height: `${designHeight}px`,
    width: `${getScale()[2]}px`
  }
})
const panelBodyWrapStyle = computed(() => {
  return {
    height: `${designHeight - 96}px`
  }
})
const panelTitle = computed(() => {
  let title = ``
  if (panelIndex.value === 0) {
    title = '知识产权数字图谱'
  } else if (panelIndex.value === 1) {
    title = '高价值专利分析图谱'
  }
  return title
})

// 面板变化
const panelChange = async (v) => {
  panelIndex.value = v.activeIndex
  await preloadImage(backUrl[panelIndex.value]) // 4.切换时调用异步方法
  backgroundImage.value = backUrl[panelIndex.value] // 5.更换实际图片路径
}
</script>