Vue Hook 封装图片懒加载通用业务

一、什么是图片懒加载

图片懒加载（Lazy Loading）是一种在用户需要的时候（通常是滚动到可视区域）才加载图片的技术。通过这种方式，可以减少页面的初始加载时间，减少带宽消耗，提高用户体验。

二、Vue中使用Intersection Observer实现图片懒加载

Intersection Observer 是一个现代浏览器提供的API，用于异步观察目标元素与其祖先元素或视窗（viewport）交叉状态的变化。我们可以利用这个API来实现图片的懒加载。

三、封装一个通用的图片懒加载 Hook

首先，我们创建一个自定义的 Vue Hook，用于实现图片懒加载功能。

1. 创建 useLazyLoad Hook

在 src/hooks 目录下创建一个 useLazyLoad.js 文件：

import { ref, onMounted, onUnmounted } from 'vue';

export function useLazyLoad(imageSelector) {
  const images = ref([]);

  const loadImage = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  };

  const observer = new IntersectionObserver(loadImage, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
  });

  onMounted(() => {
    images.value = document.querySelectorAll(imageSelector);
    images.value.forEach(img => {
      observer.observe(img);
    });
  });

  onUnmounted(() => {
    if (images.value.length) {
      images.value.forEach(img => {
        observer.unobserve(img);
      });
    }
  });

  return {
    images,
  };
}

2. 使用 useLazyLoad Hook

组件中使用这个 Hook 来实现图片懒加载。

import { ref, onMounted, onUnmounted } from 'vue';

export function useLazyLoad(imageSelector) {
  const images = ref([]);

  const loadImage = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  };

  const observer = new IntersectionObserver(loadImage, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
  });

  onMounted(() => {
    images.value = document.querySelectorAll(imageSelector);
    images.value.forEach(img => {
      observer.observe(img);
    });
  });

  onUnmounted(() => {
    if (images.value.length) {
      images.value.forEach(img => {
        observer.unobserve(img);
      });
    }
  });

  return {
    images,
  };
}

四、解释代码

1. 定义 useLazyLoad Hook：

   • 使用 Vue 的 ref、onMounted 和 onUnmounted 组合 API。
   • loadImage 函数处理图片的实际加载：当图片进入视窗时，设置图片的 src 属性，并停止观察该图片。
   • 使用 IntersectionObserver API 观察图片元素的可见性变化。

2. 在组件中使用 Hook：

   • 使用 ref 定义一个图片列表。
   • 调用 useLazyLoad 并传递图片的选择器（.lazy-load）。
   • 在模板中，使用 v-for 指令渲染图片列表，并使用 data-src 属性存储图片 URL，等待懒加载。