图片预加载在Vue中怎么实现才不会影响首屏性能？

❤树潼提问于 2026-03-25 17:20:22 阅读 3

优化

我最近在做商品详情页，图片太多导致首屏加载很慢。想用预加载提前加载后面的图片，但又怕把主资源挤掉。试了在mounted里直接new Image()去加载，结果发现页面卡顿更严重了。

有没有比较优雅的方式？比如控制并发数量或者等首屏渲染完再开始预加载？下面是我现在用的简单写法：

<template>
  <img :src="currentImg" />
</template>

<script>
export default {
  data() {
    return { currentImg: '' }
  },
  mounted() {
    const img = new Image()
    img.src = 'https://example.com/next.jpg'
    img.onload = () => {
      this.currentImg = img.src
    }
  }
}
</script>

我来解答赞 1 收藏

反馈

暂无解答