前端Elment resize检测
栏目: JavaScript · 发布时间: 6年前
内容简介：近来有需求要做分页，听起来可能有点Low。 所以我要把Low的事情做得有点逼格。分页本身没啥，但是数据量起来了，比如十万。 要是不做点处理， 那你的页面估计爽得很，机器也爽得很。 放心，我不会让你这么爽。比较流行的当然是虚拟滚动（无限滚动）。
近来有需求要做分页，听起来可能有点Low。 所以我要把Low的事情做得有点逼格。
分页本身没啥，但是数据量起来了，比如十万。 要是不做点处理， 那你的页面估计爽得很，机器也爽得很。 放心，我不会让你这么爽。
大量数据展现方案
比较流行的当然是虚拟滚动（无限滚动）。
- 始终展示的是有限的固定节点。
- 外层创建滚动层。
一句话，就是反复利用固定节点展现数据。
其中还有两个点
何时需要加载新的分页数据
- scrollTop , clientHeight, scrollHeight
- IntersectionObserver (chrome 55+)
如何知道容器宽高变化
本文就围绕着这个展开
因为使用的是react框架，使用了 react-window , react-window就是用来展现海量数据的react列表组件。
因为项目需要，还要不通尺寸一行展现不同数量的数据。 肯定有人就说，监听window.resize。
没错，监听resize一定程度，但是window.resize, 并不能让我知道容器本身的尺寸，当
然可以通过getComputedStyle获取。 要是window没有resize的情况呢。
我就想实时的知道尺寸的变化。
尺寸变化监测方案
Cross-Browser, Event-based, Element Resize Detection
这个思路是创建一个 type为text/html的节点，通过监听该节点的resize事件达到目的。
javascript-detect-element-resize
创建三个子元素，利用scroll事件来监测变化。
ResizeObserver
原生自带的方案
resize-observer-polyfill 基于resze和MutationOberver的polyfill
此外
当然，我觉得还有定时器 + getComputedStyle 也是很低成本的实现。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 如何避免Puppeteer被前端JS检测
- 前端基本功：JavaScript 的七种数据类型与数据类型检测的4种方法
- 疫情当前，写一个纯前端实现人脸检测的网页，给你的头像戴上口罩
- 恶意软件如何绕过AMSI检测以逃避检测
- 行人检测新思路：高级语义特征检测取得精度新突破
- NIC：基于神经网络不变量检测的对抗样本检测
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
21天学通C语言
（美国）琼斯（Bradley L.Jones） （美国）埃特肯（Peter Aitken） / 信达工作室 / 人民邮电出版社 / 2012-8 / 69.00元
《21天学通C语言(第6版•修订版)》是初学者学习C语言的经典教程。本版按最新的标准（ISO∕IEC:9899-1999），以循序渐进的方式介绍了C语言编程方面知识，并提供了丰富的实例和大量的练习。通过学习实例，并将所学的知识用于完成练习，读者将逐步了解、熟悉并精通C语言。《21天学通C语言(第6版•修订版)》包括四周的课程。第一周的课程介绍了C语言程序的基本元素，包括变量、常量、语句、表达式、函......一起来看看 《21天学通C语言》 这本书的介绍吧!
