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

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

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");

<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>

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

npm i @vueuse/core

import { createApp } from "vue";
import App from "./App.vue";
//从@vueuse/core中导入useIntersectionObserver函数
import { useIntersectionObserver } from "@vueuse/core";
const app = createApp(App);
app.mount("#app");

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

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

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();
      }
    });
  },
});

// 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();
          }
        });
      },
    });
  },
};

import { createApp } from "vue";
import App from "./App.vue";
import { lazyPlugin } from "./directive";
const app = createApp(App);
//注册插件
app.use(lazyPlugin);
app.mount("#app");

// 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);//监听目标元素
      },
    });
  },
};

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