当前位置：首页 > VUE

vue实现预加载图片

2026-01-23 03:01:54VUE

预加载图片的基本原理

预加载图片的核心是通过JavaScript提前创建Image对象并设置src属性，让浏览器在后台加载图片资源。当实际需要显示图片时，由于缓存已存在，图片会立即呈现。

使用Vue实现预加载的几种方法

方法一：组件内预加载

在Vue组件的mounted或created生命周期钩子中预加载图片：

export default {
  methods: {
    preloadImages(urls) {
      urls.forEach(url => {
        const img = new Image()
        img.src = url
      })
    }
  },
  mounted() {
    this.preloadImages([
      require('@/assets/image1.jpg'),
      require('@/assets/image2.png')
    ])
  }
}

方法二：全局混入预加载

创建全局mixin供所有组件使用：

// main.js
Vue.mixin({
  methods: {
    $preloadImage(url) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = resolve
        img.onerror = reject
        img.src = url
      })
    }
  }
})

// 组件中使用
this.$preloadImage('/path/to/image.jpg').then(() => {
  console.log('图片加载完成')
})

方法三：指令式预加载

自定义指令实现图片预加载：

Vue.directive('preload', {
  inserted(el, binding) {
    const img = new Image()
    img.src = binding.value
    img.onload = () => {
      el.setAttribute('src', binding.value)
    }
  }
})

// 模板中使用
<img v-preload="imageUrl" alt="">

优化策略

批量预加载

对于大量图片，建议分批次加载避免阻塞：

async function batchPreload(urls, batchSize = 5) {
  for (let i = 0; i < urls.length; i += batchSize) {
    const batch = urls.slice(i, i + batchSize)
    await Promise.all(batch.map(url => this.$preloadImage(url)))
  }
}

优先级控制

通过Intersection Observer API实现懒加载与预加载结合：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.dataset.src
      observer.unobserve(img)
    }
  })
})

document.querySelectorAll('[data-src]').forEach(img => {
  observer.observe(img)
})