使用IntersectionObserver实现图片的懒加载

<template>
  <div>
    <img v-for="image in lazyImages" :key="image.src" v-lazyload="image.src" :alt="image.alt" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      lazyImages: [
        { src: "image1.jpg", alt: "Lazy Image 1" },
        { src: "image2.jpg", alt: "Lazy Image 2" },
        { src: "image3.jpg", alt: "Lazy Image 3" },
        { src: "image4.jpg", alt: "Lazy Image 4" },
      ],
    };
  },
  directives: {
    lazyload: {
      inserted(el, binding) {
        const options = {
          root: null, // 使用默认的根元素，即视口
          threshold: 0, // 触发加载的阈值
        };

        const observer = new IntersectionObserver((entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              // 图片进入可视区域时加载图片
              el.src = binding.value;
              observer.unobserve(el);
            }
          });
        }, options);

        observer.observe(el);
      },
    },
  },
};
</script>