vue3(vite)实现图片懒加载

1、懒加载原理

普通图片展示

使用懒加载

原理：在图片将要展示到可视区域时，将v-lazys的内容交给src属性，使图片得到展示

效果展示图下贴图

当不断下滑时，就会有图片进入可视区域，图片就会被放在src标签中进行渲染

2、懒加载实现

在src目录下创建lazy文件夹，用于存放懒加载实现的自定义指令，lazy下创建index.js文件

export default {
    install(app){
        lazy(app)
    }
}

const lazy=(app)=>{
    app.directive('lazys',{
        // 当前dom元素，图片地址
        mounted(el,binding){
            // 定义观察者，用来观察是否到可是区域
            const observe=new IntersectionObserver(([{isIntersecting}])=>{
                // 在可视区域
                if(isIntersecting){
                    // 停止观察
                    observe.unobserve(el)
                    // 加载失败
                    el.onerror=()=>{
                        console.log('error')
                    }
                    // 将lazy的图片内容，交给src
                    el.src=binding.value
                }
            },{
                threshold:0
            })
            // 页面挂载后，开启观察
            observe.observe(el)
        }
    })
}

el是当前的dom

banding是当前dom对象

在main.js中引入懒加载文件，挂载到app上

import lazy from './lazy'
const app=createApp(App)
app.use(lazy)
app.mount('#app')

 3、懒加载的使用

在app.vue中放多个图片，查看懒加载是否实现