vue如何写一个渐进式图片组件？

可以使用Vue.js和Intersection Observer API来实现延迟加载图片，以提高页面性能。以下是一个简单的示例：

<template>
  <div>
    <img
      ref="image"
      :src="placeholder"
      alt="Placeholder Image"
      @load="onImageLoad"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true, // 图片的真实来源
    },
    placeholder: {
      type: String,
      required: true, // 占位图片，可以是模糊或低分辨率的图像
    },
  },
  data() {
    return {
      imageLoaded: false,
    };
  },
  methods: {
    onImageLoad() {
      this.imageLoaded = true;
    },
  },
  mounted() {
    const options = {
      root: null, // 使用viewport作为根元素
      rootMargin: '0px',
      threshold: 0.1, // 图片10%可见时加载
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 图片进入可视区域时加载真实图片
          this.$refs.image.src = this.src;
          observer.unobserve(this.$refs.image); // 停止观察
        }
      });
    }, options);

    observer.observe(this.$refs.image);
  },
};
</script>

<style scoped>
/* 添加样式以控制占位图像和加载后的图像 */
div {
  position: relative;
  width: 100%;
}

img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}

/* 图片加载前的样式，可以是占位图像的样式 */
img:not(.loaded) {
  opacity: 0;
}

/* 图片加载后的样式 */
img.loaded {
  opacity: 1;
}
</style>

这个组件的关键点是使用Intersection Observer API来观察图片是否进入了可视区域。当图片10%可见时，它会加载真实的图片，而不是一开始就加载。这种方式可以显著提高页面性能，特别是在有大量图片需要加载时。

使用方法：

<template>
  <div>
    <ProgressiveImage
      src="真实图片的URL"
      placeholder="占位图片的URL"
    />
  </div>
</template>

<script>
import ProgressiveImage from './ProgressiveImage.vue'; // 引入组件

export default {
  components: {
    ProgressiveImage, // 注册组件
  },
};
</script>

这样，您就可以在Vue项目中使用渐进式图片加载组件了。这个组件会在用户滚动到图片位置时加载真实图片，以提高性能和用户体验。