vue3(vite)实现图片懒加载

1、懒加载原理

普通图片展示

<img src="xxxx.png" alt="">

使用懒加载

<img v-lazys="xxxx.png" alt="">

原理：在图片将要展示到可视区域时，将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中放多个图片，查看懒加载是否实现

扫描二维码关注公众号，回复： 15254808 查看本文章

<template>
    <div class="imgs">
        <img v-lazys="item" v-for="item,index in lists" :key="index">
    </div>
<!-- <img src="./assets/images/1.jpg" alt=""> -->
</template>

<script setup>
import {ref} from 'vue'
import {uniq,reverse,chunk} from 'lodash'
let lists=ref(
        [
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
            'https://tse4-mm.cn.bing.net/th/id/OIP-C.7BuhSMPYLQqruILu8YFKKQHaH7?pid=ImgDet&rs=1',
        ]
    )

let arr=[1,2,1,1,3,4,5,6,7]
let result=uniq(arr)
console.log(result)
console.log(reverse(arr))
console.log(chunk(arr,2))
</script>

<style scoped lang="less">
img{
    height: 200px;
    display: block;
}
.imgs{
    background-color: red;
}
</style>