Vue3实现图片懒加载及自定义懒加载指令

前言
1.使用vue3-lazyload插件
2.自定义v-lazy懒加载指令
- 2.1 使用VueUse
- 2.2 使用IntersectionObserver

前言

图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。

图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。

本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义指令，实现的最终效果如下图所示：
在这里插入图片描述

1.使用vue3-lazyload插件

第一种方式就是使用插件，使用插件的方式非常简单，只需要简单的几步即可实现。

Vue2中可以使用vue-lazyload插件来实现图片懒加载，在Vue3中可以使用vue3-lazyload插件实现图片懒加载。

1.安装vue3-lazyload插件

$ npm i vue3-lazyload
# or
$ yarn add vue3-lazyload
# or
$ pnpm i vue3-lazyload

2.main.js入口文件注册插件

import { createApp } from "vue";
import App from "./App.vue";
//引入图片懒加载插件
import Lazyload from "vue3-lazyload";

const app = createApp(App);

//注册插件
app.use(Lazyload, {
   loading: "@/assets/images/default.png",//可以指定加载中的图像
   error: "@/assets/images/err.png",//可以指定加载失败的图像
});

app.mount("#app");

3.模板中使用v-lazy指令来延迟加载图像

<template>
  <ul class="container">
    <li v-for="item in imgList" :key="item.id">
      <img v-lazy="item.url" class="item" />
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => {
  return {
    id: `${i}`,
    url: `@/assets/images/${i}.jpg`,
  };
});
const imgList = reactive(data);
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .item {
    width: 100%;
    height: 200px;
  }
}
</style>

2.自定义v-lazy懒加载指令

下面一种方式是自定义一个懒加载的指令，如何实现呢？

图片懒加载的核心是监听图片是否进入可视区域，如果进入就替换src，即懒加载指令的核心。

网上看了很多教程，大多都使用Element.getBoundingClientRect()这个方法，该方法返回一个 DOMRect 对象，提供了元素的大小及其相对于视口的位置，然后监听滚动条事件，通过img.getBoundingClientRect()进行一系列的比较来判断图片是否在视口内，这种方式略显复杂。其实，只要我们能够简化判断图片是否进入可视区域这一流程，实现一个自定义的懒加载指令就很简单了。

有没有什么简化的方式呢？

可以通过VueUse中的useIntersectionObserver和原生的IntersectionObserver api来简化判断图片是否进入可视区域，下面就分别通过这两种简化的方式来实现一个自定义的懒加载指令。

2.1 使用VueUse

VueUse 是什么?

一款基于Vue组合式API的函数工具集。

以上是官方网站关于它的定义。

简单的说就是一个工具函数包，它可以帮助你快速实现一些常见的功能。比如下面的一些：

useLocalStorage：提供在本地存储中保存和获取数据的功能。
useMouse：提供跟踪鼠标位置和鼠标按下状态的功能。
useDebounce：提供防抖功能。
useThrottle：提供节流功能。
useIntersectionObserver：提供对元素是否可见进行观察的功能，可用于实现懒加载等效果。

本文要用到的就是其中的useIntersectionObserver这个函数，来监听图片的可见性。

首先安装 VueUse

npm i @vueuse/core

main.js入口文件导入

import { createApp } from "vue";
import App from "./App.vue";

//从@vueuse/core中导入useIntersectionObserver函数
import { useIntersectionObserver } from "@vueuse/core";

const app = createApp(App);

app.mount("#app");

directive注册v-lazy全局指令

//main.js
//注册v-lazy全局指令，使v-lazy在所有组件中都可用
app.directive("lazy", {
  //节点挂载完成后调用
  mounted(el, binding) {
    useIntersectionObserver(el, ([{ isIntersecting }]) => {
      //判断当前监听元素是否进入视口区域
      if (isIntersecting) {
        el.src = binding.value;
      }
    });
  },
});

一个指令定义对象可以提供多个钩子函数，比如 mounted、updated、unmounted 等，我们使用mounted，也就是在节点挂载完成后调用。指令的钩子有两个主要的参数：el和binding。el是指令绑定到的元素，binding中使用最多的是value，即传递给指令的值，例如在 v-lazy=“imgSrc” 中，值是 imgSrc对应的真实图片地址。

然后使用useIntersectionObserver函数，它的两个参数，一个是需要监听的元素，另一个是回调函数，参数值isIntersecting为一个布尔值，用来判断当前监听元素是否进入视口区域，如果进入视口区域，那么我们就可以将图片的真实url赋值给图片的src。

其实上述代码还有不完善的地方，首先是重复监听的问题，可以进行console调试一下：

useIntersectionObserver(el, ([{ isIntersecting }]) => {
  console.log(isIntersecting);//测试
  if (isIntersecting) {
    el.src = binding.value;
  }
});

此时的效果如下图所示：
在这里插入图片描述
从上图可以看到，往上滚动，监听过的图片会重复监听，这是我们不想要的，会造成性能浪费。

解决思路：在监听的图片第一次完成加载后就停止监听。可以利用useIntersectionObserver函数提供的stop方法，修改后的代码如下：

app.directive("lazy", {
  mounted(el, binding) {
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      console.log(isIntersecting);
      if (isIntersecting) {
        el.src = binding.value;
        //在监听的图片第一次完成加载后就停止监听
        stop();
      }
    });
  },
});

完善后的效果如下，解决了重复监听问题。
在这里插入图片描述
我们还可以设置一个默认图片，当图片还没加载完成时，就显示默认图片。

app.directive("lazy", {
  mounted(el, binding) {
    el.src = "@/assets/images/default.png"; // 使用默认图片
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      if (isIntersecting) {
        el.src = binding.value;
        //在监听的图片第一次完成加载后就停止监听
        stop();
      }
    });
  },
});

此时还存在着的一个问题是，当前注册了一个全局的自定义指令，所有的代码逻辑全写在入口文件中，这样会造成代码的臃肿。

解决思路：拆分代码，通过插件的方法把懒加载指令封装为插件，main.js入口文件只需负责注册插件即可。

src下新建directive/index.js文件，专门存放自定义的插件，把代码逻辑进行转移。

// src/directive/index.js
import { useIntersectionObserver } from "@vueuse/core";
// 封装插件
export const lazyPlugin = {
  install(app) {
    app.directive("lazy", {
      mounted(el, binding) {
        el.src = "@/assets/images/default.png"; 
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value;
            stop();
          }
        });
      },
    });
  },
};

然后在main.js中注册插件

import { createApp } from "vue";
import App from "./App.vue";
import { lazyPlugin } from "./directive";

const app = createApp(App);
//注册插件
app.use(lazyPlugin);
app.mount("#app");

定义插件可以参考Vue官网。通常一个 Vue3 的插件会暴露 install 函数，当 app 实例 use 该插件时，就会执行该函数。然后在 install 函数内部，通过 app.directive 去注册一个全局指令，这样就可以在组件中使用它们了。

现在的效果就和一开始介绍的效果一致了。
在这里插入图片描述

2.2 使用IntersectionObserver

其实查看vue3-lazy源码和useIntersectionObserver源码，会发现，它们使用的就是原生IntersectionObserver api。那么接下来我们也可以使用这个api来实现一个自定义的懒加载指令。

MDN：IntersectionObserver 提供了一种异步观察目标元素与其祖先元素或顶级文档视口交叉状态的方法。当它被创建时，其被配置为监听根中一段给定比例的可见区域。当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。

简单来说就是IntersectionObserver可以来判断图片是否进入可视区。

它对应的回调函数的参数 entries，是 IntersectionObserverEntry 对象数组。当观测的元素可见比例超过指定阈值时，就会执行该回调函数（默认阈值为 0，表示目标元素刚进入根元素可见范围时触发回调函数），对 entries 进行遍历，拿到每一个 entry，然后判断 entry.isIntersecting 是否为 true，如果是则说明 entry 对象对应的 DOM 元素进入了可视区。

具体代码如下：

// src/directive/index.js
import defaultImg from "@/assets/images/default.png";
//定义一个数组用来存储尚未加载的图片
let imgsList = [];

//加载图片
function loadingImg(imgDOM) {
  //获得图片的src
  let imgSrc = imgsList.filter((item) => item.el === imgDOM)[0].src;
  //新建Image对象实例来代替当前图片的加载，图片加载完毕就会触发onload事件，替换img元素的src属性
  const img = new Image();
  img.src = imgSrc; 
  img.onload = function () {
    // 当图片加载完成之后 替换img元素的src属性
    imgDOM.src = imgSrc;
  };
  //将已加载好的图片从数组中删除
  imgsList = imgsList.filter((item) => item.el !== imgDOM);
}

const io = new IntersectionObserver((entries) => {
  entries.forEach((item) => {
    // isIntersecting属性判断目标元素当前是否可见
    if (item.isIntersecting) {
      //加载图片，加载完后停止监听
      loadingImg(item.target);
      io.unobserve(item.target); 
    }
  });
});

export const lazyPlugin = {
  install(app) {
    app.directive("lazy", {
      mounted(el, binding) {
        el.src = defaultImg; // 使用默认图片
        io.observe(el); //监听图片
        imgsList.push({ el: el, src: binding.value }); //数组中加入当前图片
      },
      beforeUnmount(el) {
        //某个img元素解绑时，停止监听，从数组中删除
        io.unobserve(el);
        imgsList = imgsList.filter((item) => item.el !== el);
      },
    });
  },
};

主要思路就是：定义一个数组用来存储尚未加载的图片，observe方法对每个图片进行监听，如果当前图片在可视区域，就加载图片，并且从数组中删除图片，然后unobserve停止监听。

最后依然需要在main.js中注册插件，即可使用v-lazy自定义指令。

参考资料：
https://www.npmjs.com/package/vue3-lazyload
https://cn.vuejs.org/guide/reusability/custom-directives.html
https://cn.vuejs.org/guide/reusability/plugins.html
https://www.vueusejs.com/core/useIntersectionObserver/
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

好了，以上就是本文的全部内容，如有问题，欢迎指出！