首页 > 其他分享 >vue3使用自定义指令实现图片懒加载

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

时间:2024-01-28 15:45:24浏览次数:29  
标签:el 自定义 绑定 binding value observe vue3 加载

// 自定义指令
app.directive('lazy', {
    mounted(el, binding) { // 绑定的元素,绑定的值
        // IntersectionObserver可以用来自动监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断
        const observe = new IntersectionObserver(([{isIntersecting}]) => {
            if (isIntersecting) { // 如果进入了可视区
                console.log("进入了")
                // 停止观察,加载出来之后就不需要继续观察了
                observe.unobserve(el)
                console.log(el,binding.value,) // binding.value就是绑定的地址
                // 将地址给src显示
                el.src = binding.value
            }
        })
        observe.observe(el)// 使用observe上的observe方法观察这个dom元素
    }
})

模板中使用

<img v-lazy="`src/assets/2yz3m9.jpg`" alt="">

标签:el,自定义,绑定,binding,value,observe,vue3,加载
From: https://www.cnblogs.com/zxl327/p/17992930

相关文章

  • 自定义路由事件
    路由事件相比.NET事件的优点为在最合适的位置编写紧凑的、组织良好的用于处理事件的代码提供了灵活性。Xaml无限套娃的树状结构,可以简单的在逻辑树上堆砌出定制按钮,而不必像Winform那样,动不动就要大费周章的自定义控件,比如带文字和图片的按钮,这时候,路由事件支持在父级控件上解......
  • [office] Excel中2010版使用自定义名称简化计算公式的操作技巧
    假设企业申报工资基数为员工的基本工资,用户可将“基本工资”所在单元格区域命名为“申报工资基数”,今天,小编就教大家在Excel中2010版使用自定义名称简化计算公式的操作技巧。Excel中2010版使用自定义名称简化计算公式的操作步骤选择“定义名称”选项,在“员工基本信......
  • docker加载tar包
    Docker是一种容器化技术,可以快速构建、发布和部署应用程序。在Docker中,我们可以使用tar包进行构建或者导入镜像。下面我们来介绍如何在Docker中加载tar包。第一步,我们需要先将需要加载的tar包拷贝到Docker宿主机的目录下。我们以/home目录为例,将tar包命名为test.tar.gz,如下所示:c......
  • .NetCore开发人员首选框架---Bridge(Abp-VNext + Vue3)
    bridge系统是基于Abp-VNext+Vue3开发的一套前后端分离的通用权限管理系统,不论是单体服务,还是微服务都可在此基础上自由扩展,此框架组合可以说是集成了.netcore在BS架构领域最前沿的技术,框架简介如下:##......
  • 如何通过观测云的RUM找到前端加载的瓶颈--可观测性入门篇
    声明与保证本文写作于2023年6月,性能优化的评价标准和优化方式仅适用于当前观测云控制台,当然随着产品迭代及技术更新,本文也会应要求适当更新。创建、修订时间创建修改人版本2023/6/24观测云***v1.0.01.网站性能评价的发展史(近20年)讲到网站性能优化,离不开网站技术发展史,更离不开网站......
  • 可观测性平台-数据洞察(2)-网站性能探究之页面加载时间
    声明首先本文数据均来源于对观测云的观测,欢迎和我一起折腾。如果你也对这部分内容感兴趣,欢迎私信。写在前面的话本文不设预期,写到哪里,聊到哪里名词解释目录气泡图:view_resource_count:loading_time:view_path_groupresource_size气泡图气泡图可用于展示三个变量之间的关系,与散点图......
  • 自定义对象比较器,结果失真怎么办?
    如果自定义对象比较器的结果失真,那么首先需要确认比较器的compare方法是否正确实现。在Java中,compare方法应该返回一个负整数、零或正整数,分别表示第一个参数小于、等于或大于第二个参数。例如,如果我们正在比较两个Student对象,我们可能会根据他们的身高或年龄来排序。但是,如果我......
  • 一对一视频app开发,如何分块加载大文件?
    一对一视频app开发,如何分块加载大文件?后端:使用Koa2实现分块传输首先,在一对一视频app开发中,我们需要设置后端以支持分块传输编码。以下是使用Koa2的示例代码:constKoa=require("koa");constfs=require("fs");constapp=newKoa();app.use(async(ctx)=>......
  • 2024年1月Java项目开发指南15:vue3+AntDesignVue 设计页面
    考虑到有的同学对vue3不熟悉,因此,我把ControlView.vue这个页面清空,我们从0开始写。<templatestyle="width:100%"></template><scriptsetup></script><stylescoped></style>搭建页面的基本框架展开代码后复制你需要的代码。比如我选择上中下这种结构,我就复制上......
  • 为了生成latex如何在sympy中自定义向量函数?适用于自定义类的latex生成。
    在sympy.printing.Printer的_print函数中可以看到一个hook,使得对于每一个类都会尝试寻找对应的_print_{class}函数来处理,因此我们只要利用好这个hook就可以为自定义类创建latex生成逻辑,我试图创建了一个_print_BoldUndefinedFunction函数,但发现它捕获不到(其实是因为BoldUndefinedF......