vue3实现图片懒加载

1.新建directives文件夹，里面新建index.ts文件 自定义指令

// 定义自定义指令
const defineDirective = (app: any) => {
  // mylazy指令名称
  app.directive('mylazy', {
    mounted(el: HTMLImageElement, bindings: any) {
      // el表示使用指令的DOM元素
      // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindlings即是xxx对应的内容
      // 指令的功能：实现图片的懒加载
      // 1、监听图片是否进入可视区
      const oberver = new IntersectionObserver(([{ isIntersecting }]) => {
        // true；进入可视区域，false：未进入可视区域
        if (isIntersecting) {
          // 1、给图片的src属性赋值图片的地址
          el.src = bindings.value
          // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
          oberver.unobserve(el)
          // 3、加载的图片失败了，显示默认的图片地址
          el.onerror = () => {
            el.src = 'https://img-blog.csdnimg.cn/img_convert/32bbcc4fe8a7f33a88ea7579fe052087.png'
          }
        }
      })
      // 监听dom元素
      oberver.observe(el)
    },
  })
}
export default {
  install(app: any) {
    // 自定义指令
    defineDirective(app)
  },
}

main.ts全局引入

import { createApp } from 'vue'
import App from './App.vue'
// 引入自定义指令
import mylazy from '@/directives/index'
createApp(App)
    .use(mylazy)
    .mount('#app')

使用

<template>
  <div class="img-container">
    <img v-mylazy="url" alt="" v-for="url in state.urls" :key="url" />
  </div>
</template>
 
<script lang="ts" setup>
import { ref, reactive } from "vue";
 
// 通过变量方式加载图片，否则图片路径会报错
import img1 from "@/assets/1.webp";
import img2 from "@/assets/2.webp";
import img3 from "@/assets/3.webp";
import img4 from "@/assets/4.webp";
import img5 from "@/assets/5.webp";
import img6 from "@/assets/6.webp";
 
const state = reactive({
  // 直接这样 给图片路径，时会报错的，在代码外附上具体报错，解决办法就是使用import 引入图片作为变量
  // urls: [
  //   "@/assets/1.webp",
  //   "@/assets/2.webp",
  //   "@/assets/3.webp",
  //   "@/assets/4.webp",
  //   "@/assets/5.webp",
  //   "@/assets/6.webp",
  // ],
  urls: [img1, img2, img3, img4, img5, img6],
});
</script>
 
<style scoped lang="scss">
img {
  display: block;
  width: 50vw;
  height: 50vh;
}
</style>