【vue3图片懒加载的封装------基于vue3.0和IntersectionObserver封装懒加载指令,当图片进入可视区域内去加载图片,且处理加载失败,封装成指令】

图片懒加载:

当图片进入可视区域内去加载图片,且处理加载失败,封装成指令

原理:先储存图片地址 不能先放在src上  当图片进入可视区  将src地址换成存储地址

一个webAPI:IntersectionObserver(opens new window)

// 创建观察对象实例
const observer = new IntersectionObserver(callback[, options])
// callback 被观察dom进入可视区离开可视区都会触发
// - 两个回调参数 entries , observer
// - entries 被观察的元素信息对象的数组 [{元素信息},{}],信息中isIntersecting判断进入或离开
// - observer 就是观察实例
// options 配置参数
// - 三个配置属性 root rootMargin threshold
// - root 基于的滚动容器,默认是document
// - rootMargin 容器有没有外边距
// - threshold 交叉的比例
​
// 实例提供两个方法
// observe(dom) 观察哪个dom
// unobserve(dom) 停止观察那个dom

步骤:

  • 1.app.directive() 传入自定义指令的名称和配置

  • 2.当使用指令的DOM创建好后,创建一个观察对象 来观察当前使用指令的元素并开始观察

  • 3.当进入可视区后停止观察( if (isIntersecting){......} )

  • 4.把指令的值设置给el的src属性 ( binding.value 就是指令的值 )

  • 5.处理图片加载失败 error是图片加载失败的事件 加载失败后设置默认图 load是图片加载成功

具体步骤:

import defaultImg from '@/assets/images/200.png'
// 定义指令
const defineDirective = (app) => {
    // 1.图片懒加载 v-lazy  指令directive
    // 原理:先储存图片地址 不能先放在src上(放在src上直接发请求了) 当图片进入可视区 将src地址换成存储地址
    app.directive('lazy', {
        // vue2.0监听使用指令的DOM是否创建好 钩子函数:inserted
        // vue3.0的指令拥有的勾子函数和组件一样 使用指令的DOM是否创建好 钩子函数:mounted
        // el -->传入的dom   binding  --->传入的图片路径
        mounted(el,binding) {  
            // 2.创建一个观察对象 来观察当前使用指令的元素
            const observe = new IntersectionObserver(([{isIntersecting}]) => {
                if (isIntersecting) {
                    // 停止观察
                    observe.unobserve(el)
                    // console.log('进入可视区');
                    // 3.把指令的值设置给el的src属性  binding.value 就是指令的值
                    // 4.处理图片加载失败  error是图片加载失败的事件  load是图片加载成功
                    el.onerror = () => {
                        // 加载失败 设置默认图
                        el.src = defaultImg
                    }
                    el.src = binding.value
                }
             }, {
                threshold:0.01
            })
            // 开启观察
            observe.observe(el)
        },
    })
}

使用指令:在img上使用使用v-lazyload值为图片地址,不设置src属性

<img alt="" v-lazy="cate.picture">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值