ResizeObserver的使用

news2024/11/20 23:39:29

这篇说下ResizeObserver API。ResizeObserver接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

ResizeObserver避免了通过回调函数调整大小时,通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范,则应在绘制前和布局后调用 resize 事件。

这是官方介绍:ResizeObserver

方法

ResizeObserver.disconnect()

取消特定观察者目标上所有对 Element 的监听。

ResizeObserver.observe()

开始对指定 Element 的监听。

ResizeObserver.unobserve()

结束对指定 Element 的监听。

使用

let resizeObserver;

if (!resizeObserver) {
  resizeObserver = new ResizeObserver(() => {
    // 监听元素发生改变触发
  })

  // 监听的目标容器盒子
  resizeObserver.observe(Element)
}

使用碰到的问题

在使用echarts图表的时候,我用这个api相对多点,在这之前我是监听的window的resize方法,当浏览器分辨率、缩放改变的时候调用echarts的resize方法来实现图表自适应,但是这样当局部容器盒子宽高发生改变时并不能监听到。

从此后我就使用了ResizeObserver API了,确实只要当容器盒子发生改变就可以进行监听到实现自适应,但是有个问题:我们一般在echarts setOption之后会进行监听图表容器的变化,来实现图表的自适应,就像下面这样写的:

this.charts = echarts.init(document.getElementById(this.id))
let option = {
  // ...
}
this.charts.setOption(option);
if (!this.resizeObserver) {
  this.resizeObserver = new ResizeObserver(() => {
    if (this.charts) {
      this.charts.resize()
    }
  });
  this.resizeObserver.observe(document.getElementById(this.id));
}

但是这样写,我们图表在进行第一次绘制的时候,就失去了动画效果 ,就是我们echarts图表自身时带有动画效果的,下面是一些官方基础配置:

具体是为什么失去了动画,我也没太搞明白,没去看ResizeObserver或者echarts的动画这块儿的源码,时间、精力有限。然后就简单看了下如何解决这个问题

我们要解决这个问题,其实也很简单,就是我们在echarts setOption之后等图表第一次绘制并动画结束之后再使用ResizeObserver监听即可。使用setTimeout 延迟就可以了,至于延迟几秒是取决于echarts中的animationDuration配置(这个动画时长),默认是1000ms ,所以我们把上面代码改造成下面就可以:

this.charts = echarts.init(document.getElementById(this.id))
let option = {
  // ...
}
this.charts.setOption(option);
if (!this.resizeObserver) {
  setTimeout(() => {
    this.resizeObserver = new ResizeObserver(() => {
      if (this.charts) {
        this.charts.resize()
      }
    });
    this.resizeObserver.observe(document.getElementById(this.id));
  }, 1000)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1434397.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

sqli-labs-master靶场训练笔记(21-38|精英级)

2024.1.30 level-21 (cookie 注入数据加密) 从页面上就可以看出这次的数据被 baes64 加密了 中国有句古话:师夷长技以制夷 ,用base64加密后的数据即可爆出数据 加密前: admin and updatexml(1,concat(~,(select database()),~),1) and …

【QT】Graphics View绘图架构

目录 1 场景、视图与图形项 1.1 场景 2.2 视图 3.3 图形项 2 GraphicsView的坐标系统 2.1 图形项坐标 2.2 视图坐标 2.3 场景坐标 2.4 坐标映射 3 GraphicsView相关的类 3.1 QGraphicsView类的主要接口函数 3.2 QGraphicsScene类的主要接口函数 3.3 图形项 4 GraphicsView程序基…

谷粒商城【成神路】-【5】——品牌管理【上】

目录 🧈1.新建品牌分类 🥞2.导入前端代码 🧂3.页面优化 🥓4.阿里云开通oss 🌭5.文件上传 🥚6.表单后端校验 JSR303 1.新建品牌分类 在renren-fast客户端中,创建二级菜单,…

基于CNN+LSTM深度学习网络的时间序列预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络(CNN) 4.2 长短时记忆网络(LSTM) 4.3 CNNLSTM网络结构 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MA…

微信自动预约小程序开发指南:从小白到专家

在数字化时代,预约小程序已成为各类服务行业的必备工具。本文将指导你从零开始,通过第三方小程序制作平台,顺利开发出一款具有预约功能的实用小程序。 第一步:注册登录第三方小程序制作平台 首先,你需要选择一个适合你…

麻雀搜索算法|Sparrow Search Algorithm(SSA)

在麻雀群体智慧、觅食和反捕食行为的启发下,提出了一种新的群体优化方法,即麻雀搜索算法(SSA)。 1、简介 在麻雀搜索算法中包含三种类型的麻雀个体,即发现者、跟随者和侦察者,三种类型对应三种行为。发现…

Intellij IDEA各种调试+开发中常见bug

Intellij IDEA中使用好Debug,主要包括如下内容: 一、Debug开篇 ①、以Debug模式启动服务,左边的一个按钮则是以Run模式启动。在开发中,我一般会直接启动Debug模式,方便随时调试代码。 ②、断点:在左边行…

下载已编译的 OpenCV 包在 Visual Studio 下实现快速配置

自己编译 OpenCV 挺麻烦的,配置需要耗费很长时间,编译也需要很长时间,而且无法保证能全部编译通过。利用 OpenCV 官网提供的已编译的 OpenCV 库可以节省很多时间。下面介绍安装配置方法。 1. OpenCV 官网 地址是:https://opencv…

用GOGS搭建GIT服务器

GOGS官网 Gogs: A painless self-hosted Git service 进入文件所在目录 cd /usr/local/develop 解压文件 tar -xvf gogs_0.13.0_linux_amd64.tar.gz 解压之后 进入gogs 目录 cd gogs 创建几个目录 userdata 存放用户数据 log文件存放进程日志 repositories 仓库根目…

数字孪生:智慧城市的核心技术与发展

一、引言 随着城市化进程的加速,智慧城市的概念和实践逐渐成为全球关注的焦点。智慧城市利用先进的信息通信技术,提升城市治理水平,改善市民的生活质量。而数字孪生作为智慧城市的核心技术,为城市管理、规划、应急响应等方面提供…

一维差分,二维差分(详解+例题)

一、一维差分 1.1、解释: 设数列an,记an为数列bn的前n项和 原数组:a[1],a[2],a[3],a[4]..................a[n]; 构造一个数组b:b[1],b[2],b[3],b[4].................b[i]; 使得a[i] b[1] b[2] b[3] ........ b[i]; 也就是…

SpringBoot:配置相关知识点

SpringBoot:多环境配置 配置知识点demo:点击查看LearnSpringBoot02 点击查看更多的SpringBoot教程 一、SpringBootApplication SpringBootApplication 来标注一个主程序类,说明这是一个Spring Boot应用,运行这个类的main方法来…

并查集实现|并查集在相关题目中的应用|手撕数据结构专栏

前言 那么这里博主先安利一下一些干货满满的专栏啦! 高质量干货博客汇总http://t.csdnimg.cn/jdQXqGit企业开发控制理论和实操http://t.csdnimg.cn/PyPJeDocker从认识到实践再到底层原理http://t.csdnimg.cn/G6Inp手撕数据结构http://t.csdnimg.cn/XeyJn 这里是很…

IT行业证书的获取与价值:提升职业竞争力的关键

目录 IT行业证书的价值和作用 1. Cisco(思科)认证(如CCNA、CCNP、CCIE): 2. 微软认证(如MCSA、MCSE、MCSD): 3. 计算机网络技术(CompTIA Network、CompTIA Security&a…

智慧城市:打造低碳未来,引领城市数字化转型新篇章

在“万物皆可数字化”的新时代浪潮下,智慧城市作为未来城市发展的先锋方向,正在以前所未有的速度和规模重塑我们的城市面貌。 智慧城市不仅是一个技术革新的标志,更是城市治理、民生服务等领域全面升级的重要引擎。 一、智慧城市的多元应用领…

C++之字符串

C风格字符串 字符串处理在程序中应用广泛&#xff0c;C风格字符串是以\0&#xff08;空字符&#xff09;来结尾的字符数组。对字符串进行操作的C函数定义在头文件<string.h>或中。常用的库函数如下&#xff1a; //字符检查函数(非修改式操作) size_t strlen( const char …

sqli.labs靶场(54-65关)

54、第五十四关 提示尝试是十次后数据库就重置&#xff0c;那我们尝试union 原来是单引号闭合 id-1 union select 1,database(),(select group_concat(table_name) from information_schema.tables where table_schemadatabase()) -- 数据库&#xff1a;challenges&#xff0c…

Spring5系列学习文章分享---第六篇(框架新功能系列+整合日志+ @Nullable注解 + JUnit5整合)

目录 **Spring5** 框架新功能系列一Spring 5.0 框架自带了通用的日志封装Spring5 **框架核心容器**支持Nullable **注解****Spring5** **核心容器支持函数式风格** GenericApplicationContext**Spring5** **支持整合** JUnit5感谢阅读 开篇: 欢迎再次来到 Spring 5 学习系列&am…

图解支付-金融级密钥管理系统:构建支付系统的安全基石

经常在网上看到某某公司几千万的个人敏感信息被泄露&#xff0c;这要是放在持牌的支付公司&#xff0c;可能就是一个非常大的麻烦&#xff0c;不但会失去用户的信任&#xff0c;而且可能会被吊销牌照。而现实情况是很多公司的技术研发人员并没有足够深的安全架构经验来设计一套…

【2024美赛E题】985博士解题思路分析(持续更新中)!

【2024美赛E题】985博士解题思路分析&#xff01; 加群可以享受定制等更多服务&#xff0c;或者搜索B站&#xff1a;数模洛凌寺 联络组织企鹅&#xff1a;936670395 以下是E题老师的解题思路&#xff08;企鹅内还会随时更新文档&#xff09;&#xff1a; 2024美赛E题思路详解…