vue自定义懒加载
自定义懒加载,不要忘记指令前加个vv-img-lazy
·
vue自定义懒加载
-
vue3+vueuse库自定义实现懒加载
-
懒加载文件使用插件格式
-
在src目录下新建directives目录,自此目录下建立index.js文件,如下图
-
index.js的代码如下所示
// 自定义懒加载插件
// 自定义懒加载需要 vueuse库里的函数 useIntersectionObserver-响应式监听目标元素的可见性。
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
install(app){
// 懒加载指令逻辑
// 自定义指令
// 自定义懒加载指令
app.directive('img-lazy',{
mounted(el, binding){
// el:绑定哪个元素 img
// binding:binding.value 指令对于号后面绑定的表达式的值 图片url
// console.log(el,binding.value);
// useIntersectionObserver(
// el,
// // isIntersecting窗口在位置时显示boolean值
// ([{ isIntersecting }],) => {
// // console.log(isIntersecting);
// if(isIntersecting){
// // 进入指定视图区域即图片所在视图区域 添加图片地址
// el.src = binding.value
// }
// },
// )
// 避免重复监听
// useIntersectionObserver会一直监听区域位置
const { stop } = useIntersectionObserver(
el,
// isIntersecting窗口在位置时显示boolean值
([{ isIntersecting }],) => {
// console.log(isIntersecting);
if(isIntersecting){
// 进入指定视图区域即图片所在视图区域 添加图片地址
el.src = binding.value
// 解决重复监听,让图片只加载一次,省内存
stop()
}
},
)
}
})
}
}
- 在main,js里加载插件
// 引入懒加载指令插件并且注册(自定义的插件
import { lazyPlugin } from './directives'
// 注册懒加载插件
app.use(lazyPlugin)
- 使用时用
v-img-lazy
更多推荐
已为社区贡献1条内容
所有评论(0)