图片懒加载是一种常见性能优化的方式，进入网址时不全部加载图片  当用户进入图片可视区域时加载  不仅大大减少了服务器的压力  也可以时首屏时间变短

        图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。

自定义v-lazy懒加载指令

• useIntersectionObserver：提供对元素是否可见进行观察的功能，可用于实现懒加载等效果。

安装
npm i @vueuse/core

        我们这里把这个拆分代码，通过插件的方法把懒加载指令封装为插件，main.js入口文件只需负责注册插件即可。

新建文件夹   directive/index.js       

//异步加载图片
let imageAsync = url => {return new Promise((resolve, reject) => {let img = new Image()img.src = urlimg.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(() => {//成功后再替换 img 标签的 srcel.src = binding.value}).catch(error => {console.log('图片加载error', error)})io.unobserve(item.target)}})})io.observe(el)}})}
}

 main.js    注册插件

// 图片懒加载插件
import { lazyPlugin } from './directive/index'app.use(lazyPlugin)

 // 自定义指令传入一个公网的地址，也就是这个地址百度上能看到的
<img v-lazy="'https://www....'" class="onlineLayout_img" alt="" />

滚动到可视区域时，img中src赋值了就会自动发起请求