vue3中的图片懒加载指令及全局注册

vue3中的图片懒加载指令及全局注册

最近重新刷了一遍黑马的小兔鲜前端项目，发现有个懒加载的指令之前还没有用过。而且写法相对固定，因此记录一下

首先，懒加载（Lazy Loading）的作用是延迟加载某些资源或组件，直到需要它们的时候再进行加载。这种技术通常用于优化性能和资源利用率，特别是在处理大量数据或复杂的应用程序中。通过懒加载，可以减少初始加载时间和资源消耗，提升用户体验，同时在需要时动态加载内容，避免不必要的加载和占用内存，通常用在处理前端图片时。

举个例子，我们在逛淘宝时，浏览某个页面时，不需要一下子就加载所有的商品图片，一是资源浪费，二是影响效率。通常是刷到哪，就什么时候加载资源，这里就用到了图片的懒加载。

一、安装使用vueUse

安装指令：

npm i @vueuse/core

找到监视页面视口的方法：

useIntersectionObserver

其作用是监视页面上某个元素当前是不是可见的

具体用法参见文档

二、编写指令方法

一般vue项目中的全局指令方法都写在src的directives文件夹下，创建index.js文件，注册以下指令

// 定义懒加载插件
import { useIntersectionObserver } from "@vueuse/core";

export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑
    app.directive("img-lazy", {
      mounted(el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        // console.log(el, binding.value);
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
        //   console.log(isIntersecting);
          if (isIntersecting) {
            // 进入视口区域
            el.src = binding.value;
            stop();
          }
        });
      },
    });
  },
};

三、全局注册懒加载指令

在项目入口文件main.js中注册指令

import { lazyPlugin } from '@/directives'

const app = createApp(App)
app.use(lazyPlugin)

四、组件中使用懒加载指令

<template>
  <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
      <ul class="goods-list">
        <li v-for="item in hotList" :key="item.id">
          <RouterLink to="/">
            <img v-img-lazy="item.picture" alt="">
            <p class="name">{{ item.title }}</p>
            <p class="desc">{{ item.alt }}</p>
          </RouterLink>
        </li>
      </ul>
  </HomePanel>
</template>

img标签中的的v-img-lazy指令就是懒加载指令，这是vue项目的一般写法，在指令前添加v-即可

看看效果：

当页面刷到人气推荐时，加载了四张新的图片