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

我会带着你远行 2023-10-14 18:14 68阅读 0赞

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

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

## 前言 ##

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

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

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

## 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>
        <li v-for="item in imgList" :key="item.id">
          <img v-lazy="item.url" style="width: 100vw; height: 200px" />
        </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>

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

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

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

网上看了很多教程，大多都使用Element.getBoundingClientRect()等方法来获取相关元素的位置信息，然后监听scroll滚动条事件，这种方式逻辑略显复杂，而且频繁触发还会导致性能问题，需要做节流控制。

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

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

### 2.1 使用useIntersectionObserver ###

useIntersectionObserver是VueUse提供的一个方法，那么VueUse 是什么?

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

以上是[官方网站][Link 1]关于它的定义。

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

*  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;
      }
    });

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

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

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

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

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官网][Vue]。通常一个 Vue3 的插件会暴露 install 函数，当 app 实例 use 该插件时，就会执行该函数。然后在 install 函数内部，通过 app.directive 去注册一个全局指令，这样就可以在组件中使用它们了。

现在的效果就和一开始介绍的效果一致了。  
![在这里插入图片描述][30a6d9ecfe34437282476a42065cfcfb.webp_pic_center]

### 2.2 使用IntersectionObserver ###

IntersectionObserver的定义

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

简单来说就是**IntersectionObserver可以自动观察目标元素的可见性变化**，并且是异步进行检测的，从而不需要使用复杂的逻辑或导致性能问题。

其实查看[vue3-lazy源码][vue3-lazy]和[useIntersectionObserver源码][useIntersectionObserver]，会发现，它们使用的就是**IntersectionObserver api**。

那么我们也可以使用这个api来实现懒加载指令。代码如下：

// src/directive/index.js
    import defaultImg from "@/assets/images/default.png";
    
    export const lazyPlugin = {
        
      install(app) {
        
        app.directive("lazy", {
        
          mounted(el, binding) {
        
            el.src = defaultImg;
            //使用IntersectionObserver
            const io = new IntersectionObserver((entries) => {
        
              entries.forEach((item) => {
        
              	// isIntersecting属性判断目标元素当前是否可见
                if (item.isIntersecting) {
        
                  el.src = binding.value;
                  io.unobserve(item.target);//停止监听
                }
              });
            });
            io.observe(el);//监听目标元素
          },
        });
      },
    };

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

上述代码已经实现了懒加载的基本效果，其实还可以进行一些优化，那就是封装一个方法，来实现图片的异步加载。

主要思想就是图片的预加载技术，用Image对象实例代替 img目标元素加载图片，让它去请求要加载的图片路径，成功后再替换 img 标签的 src，这样就完成了图片真实地址的加载。

import defaultImg from "@/assets/images/default.png";
    //异步加载图片
    let imageAsync = (url) => {
        
      return new Promise((resolve, reject) => {
        
        let img = new Image();
        img.src = url;
        img.onload = () => {
        
          resolve();
        };
        img.onerror = (err) => {
        
          reject(err);
        };
      });
    };
    
    export const lazyPlugin = {
        
      install(app) {
        
        app.directive("lazy", {
        
          mounted(el, binding) {
        
            el.src = defaultImg;
            const io = new IntersectionObserver((entries) => {
        
              entries.forEach((item) => {
        
                if (item.isIntersecting) {
        
                  //使用异步加载图片
                  imageAsync(binding.value)
                  .then(() => {
        
                    el.src = binding.value;//成功后再替换 img 标签的 src
                  })
                  .catch((error) => {
        
                    console.log(error);
                  });
                  io.unobserve(item.target);
                }
              });
            });
            io.observe(el);
          },
        });
      },
    };

**参考资料：**  
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

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

[68c0a2b39f6149e289fb4d372160f861.webp_pic_center]: https://img-blog.csdnimg.cn/68c0a2b39f6149e289fb4d372160f861.webp#pic_center
[vue-lazyload]: https://www.npmjs.com/package/vue-lazyload
[vue3-lazyload]: https://www.npmjs.com/package/vue3-lazyload
[Link 1]: https://www.vueusejs.com/
[bc0a500f8a0345c89d5a7718b93b5819.webp_pic_center]: https://img-blog.csdnimg.cn/bc0a500f8a0345c89d5a7718b93b5819.webp#pic_center
[76409eef4dc4477a9f9d2369e59b4962.webp_pic_center]: https://img-blog.csdnimg.cn/76409eef4dc4477a9f9d2369e59b4962.webp#pic_center
[Vue]: https://cn.vuejs.org/guide/reusability/plugins.html#introduction
[30a6d9ecfe34437282476a42065cfcfb.webp_pic_center]: https://img-blog.csdnimg.cn/30a6d9ecfe34437282476a42065cfcfb.webp#pic_center
[vue3-lazy]: https://github.com/murongg/vue3-lazyload/blob/main/src/lazy.ts
[useIntersectionObserver]: https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.ts