vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

下面是针对“vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解”这个话题的详细讲解。

什么是懒加载？

图片懒加载是 Web 开发中的一种优化技术，通过延迟加载图片的方式来提升页面的加载速度和性能。当页面滚动到相关图片的位置时，才会去加载这些图片资源，避免页面开始时就同时请求所有图片资源，从而降低页面的加载速度。

IntersectionObserver 原生 API 懒加载

IntersectionObserver 是一个能观察元素与视口是否交叉的 API。交叉指的是两者是否存在重叠，也就是是否出现在视口中。如果目标元素在可见区域内，则交叉为 true；否则，交叉为 false。通过这种方式，我们可以很容易实现图片懒加载的效果，使得在用户需要加载图片时才真正加载。以下是用 IntersectionObserver 实现图片懒加载的代码示例。

<!-- template代码 -->
<img src="loading.gif" data-src="your-image.jpg" />

<!-- script代码 -->
<script>
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const { target } = entry;
      if (entry.isIntersecting && target.tagName === 'IMG') {
        target.src = target.dataset.src;
        observer.unobserve(target);
      }
    });
  });

  const images = document.querySelectorAll('img[data-src]');
  images.forEach(image => observer.observe(image));
</script>

这段代码首先为所有需要延迟加载的图片添加了一个 data-src 的属性，用于保存待加载的真实图片地址。之后通过 document.querySelectorAll 将所有包含 data-src 属性的图片遍历出来，并通过 IntersectionObserver 监听图片与视口的交叉行为，一旦交叉，则将 data-src 的值复制到 src 属性中，从而实现图片的延迟加载。

useIntersectionObserver 懒加载

useIntersectionObserver 是 vue3 中提供的一个响应式组合 API。它可以方便地使用 IntersectionObserver 来实现图片懒加载的效果，并提供了一个更好的声明式组件化方式。以下是用 useIntersectionObserver 实现图片懒加载的代码示例。

<!-- template代码 -->
<template>
  <div v-for="image in images">
    <img :src="image.url" v-if="image.isIntersecting" />
  </div>
</template>

<!-- script代码 -->
<script>
  import { ref, onMounted } from 'vue';
  import { useIntersectionObserver } from '@vueuse/core';

  export default {
    setup() {
      const images = ref([...]); // 这里需要替换成你自己的图片数据

      const intersectionObserver = useIntersectionObserver(
        entries => {
          entries.forEach(entry => {
            const { target, isIntersecting } = entry;
            target.isIntersecting = isIntersecting;
          });
        },
        {
          threshold: 0,
        }
      );

      onMounted(() => {
        images.value.forEach(image => {
          // 要确保所有图片的 isIntersecting 初始值都是false
          image.isIntersecting = false;
          intersectionObserver.observe(image);
        });
      });

      return { images };
    },
  };
</script>

这段代码通过 @vueuse/core 里的 useIntersectionObserver 来实现图片懒加载的效果。当每个图片元素进入视口的时候，就会将其 isIntersecting 属性设置为 true，从而显示真实的图片。在 onMounted 阶段，我们对每个图片元素进行 intersectionObserver.observe 注册，使其开始被监听。由于在 initial 阶段，图片还没有进入到视口，故初始值 isIntersecting 属性值被设置为 false。

通过这两种方式，我们可以非常方便地实现图片懒加载的效果，提高网页的加载速度和性能。