VUE3 图片懒加载实现

1、使用场景

一些需要一次性加载大量图片的场景，比如商城首页，此时就可以使用图片懒加载技术，优化项目性能，减少首页加载时间，这也是初次尝试，目前了解的不多，但是够用

2、实现效果

可以看到，一开始只加载了两张图片src

 当鼠标往下滚动时，可以看到图片张被加载出来

3、具体实现

3.1 我实在项目下的directives下的index.ts自定义指令的

3

3.2 然后这个文件里面的具体代码

// 引入默认/出错时显示的图片
import noImg from '@/assets/no-img.png'

// 定义自定义指令
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 = noImg
          }
        }
      })
      // 监听dom元素
      oberver.observe(el)
    },
  })
}
export default {
  install(app: any) {
    // 自定义指令
    defineDirective(app)
  },
}

注意：在能不用any的情况，最好不用，我这里只是贪图方便，解决elint红线问题

 3.3 main.ts全局引入

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

3.4 使用

ImgLazy.vue中的代码

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

上面代码直接使用 '@/assets/1.webp'图片报错

解决办法就是，通过import 变量名 from "@/assets/1.webp" 解决

App.vue中的代码

<template>
  <div><ImgLazy /></div>
</template>

<script setup lang="ts">
import ImgLazy from "@/components/ImgLazy.vue";
</script>

<style scoped lang="scss"></style>

欢迎各位大佬批评指正！！蟹蟹！！