当前位置: 首页 > news >正文

vue图片懒加载指令实现

  1. 在main.js中定义全局指令
    1. //引入vueuse三方库
      import { useIntersectionObserver } from "@vueuse/core"   //定义全局指令
      app.directive("img-lazy", {mounted(el, binding) {//el:指令绑定的那个元素//binding:binding.value   指令等于号后面绑定的表达式的值 图片url//console.log(el, binding.value)//拿到stop方法,保证图片只加载一次const {stop}=   useIntersectionObserver(el, ([{ isIntersecting }]) => {//测试下它是否到了视口区域console.log(isIntersecting)if (isIntersecting) {//true就进入到视口区域了el.src = binding.valuestop()}})}
      })

    2. 对应位置使用

      •  <img v-img-lazy="item.picture"   alt="" />

视频源: Day3-05.Home-图片懒加载指令实现_哔哩哔哩_bilibili

代码还可以从main.js抽出封装,详细请见下个视频3-06.

 

http://www.xdnf.cn/news/558199.html

相关文章:

  • 指针深入理解(二)
  • 在表格中使用AI解析通信协议
  • Vue3 父子组件传值, 跨组件传值,传函数
  • 进程——概念及状态
  • 算法训练之分治(快速排序)
  • 浏览器播放 WebRTC 视频流
  • 从客厅到驾驶舱:FSHD 如何成为全场景显示「破局者」
  • 第四十一节:人脸检测与识别-Haar 级联分类器
  • 城市共治的伦理平台愿景
  • 第6天-Python操控摄像头:从入门到实战
  • 四元数中 w xyz 的含义及应用
  • 通义灵码助力JavaScript开发:快速获取API与智能编码技巧
  • celery独立部署接入数据库配置
  • 【C++算法】68.栈_字符串解码
  • 关于Linux服务器数字取证一
  • pytorch小记(二十四):PyTorch 中的 `torch.full` 全面指南
  • Python 包管理工具 uv
  • RocketMQ 的事务消息是如何实现的
  • 【Java高阶面经:微服务篇】3.熔断机制深度优化:从抖动治理到微服务高可用架构实战
  • unipp === 状态管理 Pinia 使用
  • 萌新联赛第(三)场
  • 自建主机NAS
  • Java转Go日记(四十二):错误处理
  • 链表-设计链表
  • OBS Studio:windows免费开源的直播与录屏软件
  • Tractor S--二维转一维,然后最小生成树
  • Python 中 pass 语句的详解和使用
  • Java双指针法:原地移除数组元素
  • IEEE出版|2025年智能光子学与应用技术国际学术会议(IPAT2025)
  • CRC计算