在Vue3中实现懒加载功能的代码示例

npm install -g @vue/cli
vue create lazy-load-demo
cd lazy-load-demo
npm run serve

npm install intersection-observer

import 'intersection-observer';

<template>
  <div ref="imageRef" class="lazy-load-image">
    <img
      v="isVisible"
      :src="src"
      :alt="alt"
      @load="onLoad"
      @error="onError"
    />
    <div v-else class="placeholder">Loading...</div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      default: 'Image',
    },
  },
  setup(props) {
    const imageRef = ref(null);
    const isVisible = ref(false);
    let observer = null;

    const loadImage = (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          isVisible.value = true; // Set the image to be visible
          observer.unobserve(entry.target); // Unobserve after loading
        }
      });
    };

    onMounted(() => {
      observer = new IntersectionObserver(loadImage);
      if (imageRef.value) {
        observer.observe(imageRef.value); // Observe the image element
      }
    });

    onBeforeUnmount(() => {
      if (observer && imageRef.value) {
        observer.unobserve(imageRef.value); // Clean up on unmount
      }
    });

    return {
      imageRef,
      isVisible,
    };
  },
};
</script>

<style scoped>
.lazy-load-image {
  width: 100%;
  height: auto;
  position: relative;
}

.placeholder {
  width: 100%;
  height: 200px; /* Specify a height for the placeholder */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}
</style>

<template>
  <div class="image-list">
    <LazyLoadImage
      v-for="(image, index) in images"
      :key="index"
      :src="image.src"
      :alt="image.alt"
    />
  </div>
</template>

<script>
import LazyLoadImage from './components/LazyLoadImage.vue';

export default {
  components: {
    LazyLoadImage,
  },
  data() {
    return {
      images: [
        { src: 'https://placekitten.com/800/600', alt: 'Cat 1' },
        { src: 'https://placekitten.com/801/600', alt: 'Cat 2' },
        { src: 'https://placekitten.com/802/600', alt: 'Cat 3' },
        { src: 'https://placekitten.com/803/600', alt: 'Cat 4' },
        { src: 'https://placekitten.com/804/600', alt: 'Cat 5' },
        // 可以添加更多图片
      ],
    };
  },
};
</script>

<style>
.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>