面试题：Vue项目中如何使用预加载图片资源

Question

在Vue项目里，假设需要预加载一组图片资源，用于在用户触发某个操作后立即展示，避免加载延迟。请阐述实现思路，并给出简单代码示例。

Answer 1

实现思路

1. 创建一个数组来存储需要预加载的图片URL。
2. 使用Image对象的src属性来加载图片，Image对象会自动触发图片的下载。
3. 可以通过监听load事件来判断图片是否加载完成，当所有图片都加载完成后，可以标记预加载完成。

代码示例

<template>
  <div>
    <button @click="showImages">触发操作展示图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      preloadedImages: [],
      isPreloaded: false
    };
  },
  created() {
    const imageUrls = [
      'url1.jpg',
      'url2.jpg',
      'url3.jpg'
    ];
    this.preloadImages(imageUrls);
  },
  methods: {
    preloadImages(urls) {
      const promises = urls.map(url => {
        return new Promise((resolve, reject) => {
          const img = new Image();
          img.onload = resolve;
          img.onerror = reject;
          img.src = url;
          this.preloadedImages.push(img);
        });
      });

      Promise.all(promises).then(() => {
        this.isPreloaded = true;
        console.log('所有图片预加载完成');
      }).catch(error => {
        console.error('图片预加载出错', error);
      });
    },
    showImages() {
      if (this.isPreloaded) {
        // 这里可以执行展示图片的逻辑，比如显示图片组件等
        console.log('立即展示预加载的图片');
      } else {
        console.log('图片还未预加载完成');
      }
    }
  }
};
</script>