如何监测节点尺寸变化检测

简介: 近来有需求要做分页,听起来可能有点Low。 所以我要把Low的事情做得有点逼格。

前言



近来有需求要做分页,听起来可能有点Low。 所以我要把Low的事情做得有点逼格。

分页本身没啥,但是数据量起来了,比如十万。 要是不做点处理, 那你的页面估计爽得很,机器也爽得很。 放心,我不会让你这么爽。


大量数据展现方案



比较流行的当然是虚拟滚动(无限滚动)。


  1. 始终展示的是有限的固定节点。
  2. 外层创建滚动层。


一句话,就是反复利用固定节点展现数据。


其中还有两个点


何时需要加载新的分页数据

  1. scrollTop , clientHeight, scrollHeight
  2. IntersectionObserver (chrome 55+)


如何知道容器宽高变化


本文就围绕着这个展开


因为使用的是react框架,使用了 react-window, react-window就是用来展现海量数据的react列表组件。


因为项目需要,还要不通尺寸一行展现不同数量的数据。 肯定有人就说,监听window.resize。


没错,监听resize一定程度,但是window.resize, 并不能让我知道容器本身的尺寸,当 然可以通过getComputedStyle获取。 要是window没有resize的情况呢。    


我就想实时的知道尺寸的变化。


尺寸变化监测方案



监测元素resize这里有几种方案的测试和源码。


Cross-Browser, Event-based, Element Resize Detection


思路:

如果IE,直接注册onresize(这个点赞啊)

否则: 创建 type为text/html的object

设置position为absolute, 高度100%, 宽度100% (这样可以获得父容器的宽高)

设置pointer-events:none,利用点击穿透(让object窗体变成幽灵)

object元素的高度变化后,通知订阅者

resize事件节流


问题:

  1. 创建object
  2. 事件处理函数挂载了元素本身上


javascript-detect-element-resize


创建三个子元素,利用scroll事件来监测变化。


原理:

zhuanlan.zhihu.com/p/24887312The scroll event is fired when the document view or an element has been scrolled. 当文档视图或者元素滚动的时候会触发 scroll 事件。 也就是说元素滚动的时候会触发这个事件,那么什么时候元素会滚动?当元素大于其父级元素,且父级元素允许其滚动的时候,该元素可以进行滚动。 换句话说,元素可以滚动意味着父子元素大小不一致,这是这个方法的核心。 那么我们需要让元素大小发生改变时,使得 scrollLeft 或者 scrollTop 发生改变,从而触发 scroll 事件,进一步得知其大小发生了改变。


visibility: hidden; opacity: 0; position: absolute;让自己变得虚无

addEventListener("scroll", scrollListener, true) 在捕捉阶段拦截事件,使用false无效

div.expand-trigger 变大

div.expand-trigger 变小

animationstart来监听显示,比如style.display = 'none'然后style.display = 'block'


问题:


  1. 额外创建四个元素节点以及一个style节点
  2. 事件都挂载了元素本身身上,


ResizeObserver


原生自带的方案, 兼容性并不高,  resize-observer-polyfill 基于resize和MutationOberver的polyfill实现了ResizeObserver。


const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            console.log(entry.target.id, `height:${entry.contentRect.height}  width:${entry.contentRect.width}`);
        }
        });
        resizeObserver.observe(document.querySelector('#my_element'));
        resizeObserver.observe(document.querySelector('#my_element2'));
复制代码

此外



当然,我觉得还


  1. 定时器 + getComputedStyle 也是很低成本的实现。
  2. resize + MutationOberver 也是很简单的方案。

写在最后



不忘初衷,有所得,而不为所累,如果你觉得不错,你的一赞一评就是我前行的最大动力。





相关文章
|
1月前
|
搜索推荐 数据安全/隐私保护
智能玻璃:自适应环境变化的建筑材料
【10月更文挑战第17天】智能玻璃是一种能够根据外界环境条件自动调节透明度、颜色或隔热性能的高科技建筑材料。本文介绍了智能玻璃的工作原理(如电致变色、热致变色、光致变色)、分类、应用领域(建筑、汽车、航空)以及其在节能环保、隐私保护、光线控制等方面的卓越表现。未来,智能玻璃将更加智能化,助力建筑行业向绿色化、可持续方向发展。
|
6月前
|
机器学习/深度学习 传感器 算法
目标检测+车道线识别+追踪+测距(代码+部署运行)
目标检测+车道线识别+追踪+测距(代码+部署运行)
|
算法 计算机视觉
指针式仪表的表盘自动识别算法
指针式仪表的表盘自动识别算法
1880 0
指针式仪表的表盘自动识别算法
遥感原理与应用:常用波段及其特性、太阳辐射衰减原因、大气窗口及其分布是什么?
遥感原理与应用:常用波段及其特性、太阳辐射衰减原因、大气窗口及其分布是什么?
419 0
遥感原理与应用:常用波段及其特性、太阳辐射衰减原因、大气窗口及其分布是什么?
|
传感器 存储 算法
使用车载激光雷达数据在惯性测量单元读数帮助下构建地图
处理来自安装在车辆上的传感器的 3-D 激光雷达数据,以便在惯性测量单元 (IMU) 读数的帮助下逐步构建地图。这样的地图可以促进车辆导航的路径规划,也可以用于定位。
106 0
|
机器学习/深度学习 Web App开发 人工智能
随时随地,追踪每个像素,连遮挡都不怕的「追踪一切」视频算法来了
随时随地,追踪每个像素,连遮挡都不怕的「追踪一切」视频算法来了
142 0
|
定位技术 API C#
【EasyAR学习】平面追踪、表面跟踪和运动跟踪、稀疏空间地图
Easy平面追踪、表面跟踪和运动跟踪、稀疏空间地图解析与实战
792 0
|
存储 数据采集 定位技术
巧用千寻位置GNSS软件|点测量采集技巧
点测量是测量中重要的节点,在测量工作的信息处理分析中发挥着重要作用。本期将给各位带来使用千寻位置GNSS软件采集地形点、控制点、快速点、连续点、房角点和倾斜点的操作技巧。
巧用千寻位置GNSS软件|点测量采集技巧
|
智慧交通
智慧交通day03-车道线检测实现06:车道线定位及拟合+代码实现
我们根据前面检测出的车道线信息,利用直方图和滑动窗口的方法,精确定位车道线,并进行拟合。
252 0
|
定位技术
视觉测量工件尺寸
视觉测量工件尺寸
195 0