vue3封装Hooks实现图片懒加载指南

import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
export default function useLazyLoad() {
  // 用于存储图片是否加载完成的响应式状态
  const isLoaded = ref(false);

  // 加载图片的函数
  const loadImage = (imgElement) => {
      if (!imgElement) return;

      const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
              if (entry.isIntersecting) {
                  const img = entry.target;
                  img.src = img.dataset.src;
                  isLoaded.value = true;
                  observer.disconnect();
              }
          });
      });

      observer.observe(imgElement);
  };

  // 在组件挂载时执行的逻辑
  onMounted(() => {
      // 使用nextTick确保DOM更新完成后再获取图片元素
      nextTick(() => {
          const imgElements = document.querySelectorAll('img[data-src]');
          imgElements.forEach((img) => {
              loadImage(img);
          });
      });
  });

  // 在组件卸载前执行的逻辑
  onBeforeUnmount(() => {
      const observers = [];
      const imgElements = document.querySelectorAll('img[data-src]');
      imgElements.forEach((img) => {
          const observer = img.__observer;
          if (observer) {
              observers.push(observer);
          }
      });

      observers.forEach((observer) => {
          observer.disconnect();
      });
  });

  return {
      isLoaded
  };
}

npm install vue3-lazyload

import { ref, onMounted, onBeforeUnmount } from 'vue';
import lazyLoad from 'vue3-lazyload';
export default function useLazyLoad() {
    // 创建一个响应式的对象来存储图片加载状态
    const isLoaded = ref(false);

    // 定义加载图片的函数
    const loadImage = (imgElement) => {
        if (!imgElement) return;

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    lazyLoad(entry.target);
                    isLoaded.value = true;
                    observer.disconnect();
                }
            });
        });

        observer.observe(imgElement);
    };

    // 在组件挂载时，绑定加载图片的事件
    onMounted(() => {
        const imgElements = document.querySelectorAll('img[data-src]');
        imgElements.forEach((img) => {
            loadImage(img);
        });
    });

    // 在组件卸载前，清除所有的观察器
    onBeforeUnmount(() => {
        const observers = [];
        const imgElements = document.querySelectorAll('img[data-src]');
        imgElements.forEach((img) => {
            const observer = img.__observer;
            if (observer) {
                observers.push(observer);
            }
        });

        observers.forEach((observer) => {
            observer.disconnect();
        });
    });

    return {
        isLoaded
    };
}