图片懒加载指令实现

一、适用场景

       在电商网站的首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片就可以通过懒加载优化手段做到——只有进入视口区域才发送图片请求

二、指令用法

<img v-img-lazy="item.picture">

在图片img身上绑定指令，该图片只有在正式进入到视口区域时才会发送图片网络请求。这个图片就变成了懒加载的图片

三、实现思路和步骤

核心原理：图片进入视口才发送资源请求

熟悉指令用法→判断图片是否进入视口（vueUse）→测试图片监控是否生效→如果图片进入视口，发送图片资源请求（img.src=url）→测试图片资源是否发出

1.在main.js写入一下代码，定义全局指令

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 定义全局指令
app.directive('img-lazy',{
    mounted(el,binding){
        // el——指令绑定的那个元素，img
        // binding——binding.value ，指令等于号后面绑定表达式的值，图片url
        console.log(el,binding.value);
    }
})

2.测试一下，看能否打印出来图片地址（给img加上v-img-lazy指令）

<img v-img-lazy=