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中放多个图片,查看懒加载是否实现
<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>