vue实现图片懒加载

在src中创建一个directives文件夹在里面创建一个lazy.js文件

在main.js中引入

import lazy from './directives/lazy'

app.directive('lazy', lazy)

在app.vue中

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>

<div class="img-container">
      <!-- src是刚开始没有加载出的图片 data-src是加载后的图片，已经进入显示区域的图片 -->
      <!--  v-lazy 懒加载 将它绑的在每个需要懒加载的图片上 -->
      <img
        v-lazy
       src="https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280"
        alt=""
        
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
      v-lazy
       src="https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"
        alt=""
      
        class="lazyload"
      />
    </div>

    <div class="img-container">
      <img
      v-lazy
       src="https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"
        alt=""
       
        class="lazyload"
      />
    </div>

    <div class="img-container">
      <img
      v-lazy
        src="https://inews.gtimg.com/news_bt/OLxGAuCdJ1SwoZRdrZoqGrpBGX-BgYjWnSFuiDDoS3xQsAA/1000"
        alt=""
      
        class="lazyload"
      />
    </div>

    <div class="img-container">
      <img
      v-lazy
       src="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/2101/25/c1/251135935_1611532823091_mthumb.jpg"
        alt=""
       
        class="lazyload"
      />
    </div>

    <div class="img-container">
      <img
      v-lazy
       src="https://img2.baidu.com/it/u=4045137561,4227164018&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1280"
        alt=""
     
        class="lazyload"
      />
    </div>


  <!-- <RouterView /> -->
</template>

<style scoped>

* {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .lazyload {
      width: 200px;
      height: 200px;
    }



@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

在lazy.js中

export default {
  //定义了一个 mounted 方法，在相关组件挂载到页面后执行一些操作，参数 el 通常指的是被挂载的元素。
  mounted(el) {
    //查看图片是否被绑的
    // console.log(el,'这个是el');

    //将图片保存在src属性上
    const imgSrc=el.src;
    //el.src=''; 因为直接进入不加载图片，要将图片清空
    el.src='';

    //观察者 观察当前图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      
      //元素出现在可视区域，和元素离开可视区域
      console.log("进入可视区域");

      //isIntersecting 是 IntersectionObserverEntry 对象的一个属性，它表示目标元素与根元素是否相交。
      //如果 isIntersecting 的值为 true，则表示目标元素与根元素相交；
      //如果 isIntersecting 的值为 false，则表示目标元素与根元素不相交。

      //图片出现在可视区，和图片离开可视区
      if(isIntersecting){
        // 加载图片
        el.src =imgSrc;
        //停止观察
        observer.unobserve(el);

      }



    });
    //在进行某种观察或监听操作
    observer.observe(el);
  },
};