vue.js 预加载图片

Vue.js 预加载图片通常是为了提升用户体验，特别是在页面滚动或组件加载时，可以先预加载相关的背景图片或占位图，等实际显示时图像已经准备好，减少用户的等待时间。在 Vue 中，你可以通过一些技巧来实现这个功能：

1. **使用 `v-if` 或 `v-show`**：对于懒加载图片，可以在元素上设置 `v-if="isLoaded"`，一开始将 `isLoaded` 设置为 `false`，当图片加载完成后再将其改为 `true`。

<img :src="lazySrc" v-if="!isLoaded" :alt="description">

data() {
  return {
    lazySrc: 'placeholder.jpg',
    isLoaded: false,
    description: '图片描述'
  }
},
methods: {
  loadImage() {
    const img = new Image();
    img.src = this.lazySrc;
    img.onload = () => {
      this.isLoaded = true;
    };
  }
}

然后，在需要的地方触发 `loadImage()` 函数。

2. **使用第三方库**：如 `vue-lazyload`、`vue-image-loading` 等插件，它们提供了更方便的 API 和优化处理，比如错误处理和性能优化。

安装示例：

npm install vue-lazyload

应用到组件：

<vue-lazy-img :src="lazySrc" placeholder-src="placeholder.jpg" @load="onLoad"></vue-lazy-img>

3. **使用 `<img>` 标签的 `srcset` 和 `sizes` 属性**：现代浏览器支持这些属性来智能地选择最合适的图片资源，可以在图片未加载前提供替代内容。

<img src="small.jpg"
     srcset="large.jpg 2x, medium.jpg 1.5x"
     sizes="(min-width: 768px) 100%, 50vw"
     alt="图片描述">

这会在屏幕宽度大于768px时加载大尺寸图片，否则显示小尺寸版本。