hover 替换图片怎么预加载 vue3

一 问题

1 移入切换图片： 移入时候才去加载图片，速度太慢，导致从上而下加载一段时间，感受不好

2 移入切换图片： 图片未加载，导致漏出边框，发生抖动

链接伪类(:hover)CSS背景图片有闪动BUG的解决方法 vue3

二解决

2.1 移入切换图片： 移入时候才去加载图片，速度太慢

hover 替换图片怎么预加载 vue3

<template>
  <div>
    <img v-if="imageLoaded" :src="hoverImageSrc" @mouseover="useHoverImage" @mouseleave="restoreOriginalImage" />
    <img v-else src="originalImageSrc" />
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const hoverImageSrc = 'path/to/hover-image.jpg';
const originalImageSrc = 'path/to/original-image.jpg';
const imageLoaded = ref(false);
 
const preloadImage = (src) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      resolve(true);
    };
    img.src = src;
  });
};
 
const useHoverImage = () => {
  imageLoaded.value = true;
};
 
const restoreOriginalImage = () => {
  imageLoaded.value = false;
};
 
onMounted(async () => {
  await preloadImage(hoverImageSrc);
});
</script>

项目中部分代码

    <div
        class="funnel_item funnel_item_top"
        @click="clickPage(1)"
        @mouseover.stop="mouseMoveImg(1)"
        @mouseleave.stop="mouseLeaveImg(1)"
      >
        <div class="item_image funnel_item_top">
          <img class="funnel_top" :src="funnel_top" alt="" />
          <div
            class="image_advertising_title_top"
            v-if="indexView.nonAdFlowRate && indexView.adFlowRate"
          >
            非广告流量{{ indexView.nonAdFlowRate }}% / 广告{{ indexView.adFlowRate }}%
          </div>

          <div class="image_advertising_title_top" v-else> 非广告流量0% / 广告0%</div>
        </div>


。。。。
</div>



<script>
const funnel_top = ref(new URL(`@/assets/img/funnel_top.png`, import.meta.url).href)
const funnel_middle = ref(new URL(`@/assets/img/funnel_middle.png`, import.meta.url).href)
const funnel_bottom = ref(new URL(`@/assets/img/funnel_bottom.png`, import.meta.url).href)

const mouseMoveImg = (type) => {
  switch (type) {
    case 1:
      funnel_top.value = new URL(`@/assets/img/funnel_top_active.png`, import.meta.url).href
      break
    case 2:
      funnel_middle.value = new URL(`@/assets/img/funnel_middle_active.png`, import.meta.url).href
      break
    case 3:
      funnel_bottom.value = new URL(`@/assets/img/funnel_bottom_active.png`, import.meta.url).href
      break
  }
}

const mouseLeaveImg = (type) => {
  switch (type) {
    case 1:
      funnel_top.value = new URL(`@/assets/img/funnel_top.png`, import.meta.url).href
      break
    case 2:
      funnel_middle.value = new URL(`@/assets/img/funnel_middle.png`, import.meta.url).href
      break
    case 3:
      funnel_bottom.value = new URL(`@/assets/img/funnel_bottom.png`, import.meta.url).href
      break
  }
}

const preloadImage = (src) => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => {
      resolve(true)
    }
    img.src = src
  })
}

//预加载图片
onMounted(async () => {
  await preloadImage(new URL(`@/assets/img/funnel_top_active.png`, import.meta.url).href)
  await preloadImage(new URL(`@/assets/img/funnel_middle_active.png`, import.meta.url).href)
  await preloadImage(new URL(`@/assets/img/funnel_bottom_active.png`, import.meta.url).href)
})

</script>

2.2 链接伪类(:hover)CSS背景图片有闪动BUG的解决方法 vue3

链接伪类(:hover)CSS背景图片有闪动BUG的解决方法 vue3-CSDN博客