Vue3 + TypeScript 实现图片懒加载

2024-01-13 03:11:08

<script>
// 懒加载指令
import { Directive } from 'vue';

// 指令定义
const lazyload: Directive = {
  // 当指令第一次绑定到元素时调用
  mounted(el, binding) {
    // 获取图片元素
    const img = el.querySelector('img');
    // 如果没有图片元素，则不做任何操作
    if (!img) {
      return;
    }
    // 创建 IntersectionObserver 对象
    const observer = new IntersectionObserver(
      (entries, observer) => {
        // 获取图片元素是否在视口内
        const isIntersecting = entries[0].isIntersecting;
        // 如果图片元素在视口内，则加载图片
        if (isIntersecting) {
          // 设置图片的 src 属性，加载图片
          img.src = binding.value;
          // 取消观察者对该元素的观察
          observer.unobserve(el);
        }
      },
      // 观察器配置选项
      {
        root: null,
        rootMargin: '0px',
        threshold: 0,
      }
    );
    // 开始观察图片元素
    observer.observe(el);
  },
};

// 将指令注册到 Vue
export default lazyload;
</script>

前言

图片懒加载是一种优化网页性能的技术，它可以延迟加载不在视口内的图片，直到用户滚动到它们为止。这样可以减少页面加载时间，提高页面加载速度。

在 Vue3 中，我们可以使用 IntersectionObserver API 来实现图片懒加载。IntersectionObserver API 可以让我们观察一个元素是否在视口内，当元素在视口内时触发回调函数。

实现

1. 创建懒加载指令

首先，我们需要创建一个懒加载指令。指令是一个可以应用于 HTML 元素的特殊属性，它可以用来修改元素的行为。

// 懒加载指令
import { Directive } from 'vue';

// 指令定义
const lazyload: Directive = {
  // 当指令第一次绑定到元素时调用
  mounted(el, binding) {
    // 获取图片元素
    const img = el.querySelector('img');
    // 如果没有图片元素，则不做任何操作
    if (!img) {
      return;
    }
    // 创建 IntersectionObserver 对象
    const observer = new IntersectionObserver(
      (entries, observer) => {
        // 获取图片元素是否在视口内
        const isIntersecting = entries[0].isIntersecting;
        // 如果图片元素在视口内，则加载图片
        if (isIntersecting) {
          // 设置图片的 src 属性，加载图片
          img.src = binding.value;
          // 取消观察者对该元素的观察
          observer.unobserve(el);
        }
      },
      // 观察器配置选项
      {
        root: null,
        rootMargin: '0px',
        threshold: 0,
      }
    );
    // 开始观察图片元素
    observer.observe(el);
  },
};

// 将指令注册到 Vue
export default lazyload;

2. 使用懒加载指令

接下来，我们可以在组件中使用懒加载指令。

<template>
  <div>
    <img v-lazyload="imageUrl" alt="图片">
  </div>
</template>

<script>
import lazyload from '@/directives/lazyload';

export default {
  directives: {
    lazyload,
  },
  data() {
    return {
      imageUrl: 'https://example.com/image.png',
    };
  },
};
</script>