自定义指令实现图片懒加载

第一步: 定义懒加载全局指令插件

         具体操作:新建一个defineDirective.js文件,封装好以下代码

import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
  install (app) {
    console.log('确认插件已经注册好了', app)
    // 定义指令
    app.directive('img-lazy', {
      mounted (el, binding) {
        console.log(el, binding.value)

        // 核心思想:监控图片是否进入到视口区域 如果进来才发送图片请求
        // 技术点:1. 如何知道图片进入到视口了? 2. 如何发送请求?
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 布尔值 true代表监听的元素已经进入了视口
            // false代表监听的元素离开了视口
            // 这个函数的监听很精确 不光可以横向 还可纵向
            
            if (isIntersecting === true) {
              // ? 当前图片进入视口了 赋值src正式发送图片请求
              el.src = binding.value
              // 优化 图片第一次请求回来后就停止监听
              stop()
            }
          },
          // threshold: 0 - 1 值越小 代表进入的视口的面积越小就会触发
          // 反之越大触发 0 img刚刚露头就触发  1 完全暴露在视口中才会触发
          { threshold: 0 }
        )
      }
    })
  }
}

export default plugin

第二步:在main.js中注册插件

        先引入,后注册

          

         注册代码:createApp(App).use(defineDirective)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值