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

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

优化

我最近在做商品详情页，图片太多导致首屏加载很慢。想用预加载提前加载后面的图片，但又怕把主资源挤掉。试了在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>

我来解答赞 8 收藏

反馈

1 条解答

UP主～子瑄 Lv1

我之前也遇到过这种问题，你可以用一个队列控制预加载。首屏渲染完再开始预加载，设置个最大并发数。

export default {

  data() { return { currentImg: '', queue: [], maxConcurrent: 3 } },

  mounted() {

    setTimeout(() => {

      this.loadImages(['img1.jpg', 'img2.jpg', 'img3.jpg'])

    }, 0)

  },

  methods: {

    loadImages(images) {

      let loaded = 0

      const loadNext = () => {

        if (loaded >= images.length || this.queue.length >= this.maxConcurrent) return

        const img = new Image()

        this.queue.push(img)

        img.src = images[loaded]

        img.onload = () => {

          this.queue.splice(this.queue.indexOf(img), 1)

          this.currentImg = img.src

          loaded++

          loadNext()

        }

        loadNext()

      }

      loadNext()

    }

  }

}

2026-03-25 21:00