监测元素resize
前言
近来有需求要做分页,听起来可能有点Low。 所以我要把Low的事情做得有点逼格。
分页本身没啥,但是数据量起来了,比如十万。 要是不做点处理, 那你的页面估计爽得很,机器也爽得很。 放心,我不会让你这么爽。
大量数据展现方案
比较流行的当然是虚拟滚动(无限滚动)。
- 始终展示的是有限的固定节点。
- 外层创建滚动层。
一句话,就是反复利用固定节点展现数据。
其中还有两个点
何时需要加载新的分页数据
- scrollTop , clientHeight, scrollHeight
- 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事件节流
问题:
- 创建object
- 事件处理函数挂载了元素本身上
javascript-detect-element-resize
创建三个子元素,利用scroll事件来监测变化。
原理:
https://zhuanlan.zhihu.com/p/24887312
The 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'
问题:
- 额外创建四个元素节点以及一个style节点
- 事件都挂载了元素本身身上,
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'));
此外
当然,我觉得还
- 定时器 + getComputedStyle 也是很低成本的实现。
- resize + MutationOberver 也是很简单的方案。
最新文章
- Android Programming: Pushing the Limits -- Chapter 7:Android IPC -- ApiWrapper
- ORA-32004 参数设置过时的解决办法
- 使用info.plist(或工程名-info.plist)向程序中添加软件Build ID或者版本号信息
- 【转】Hibernate映射机制之XXX.hbm.xml
- CDT 错误 Cannot run program ";gcc";
- java中instanceof的用法
- bzoj 1188 [HNOI2007]分裂游戏 SG函数 SG定理
- FFmpeg 结构体学习(一): AVFormatContext 分析
- java最简单实现Log打印和生成日志文件
- 7.C# 多态的实现
- LocalStorage存储和cookie存储
- C++的虚函数
- 使用MyEclipse开发Java EE应用:用XDoclet创建EJB 2 Session Bean项目(一)
- redisUtils
- align-items (适用于父类容器上)
- Genymotion上不能安装APK软件的问题
- python版本共存
- HTML表单的应用
- 服务器BMC(带外)
- 【MVVM Dev】PART_Editor的使用
热门文章
- eos表结构总结说明
- 转载ASP.NET MVC中Session的处理机制
- Netty入门系列(2) --使用Netty解决粘包和拆包问题
- yii2之目录解析
- Listbox 实现Item双击事件
- 大整数因子(高精mod)
- python——类与对象
- Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) D
- poj3264_Balanced Lineup
- 使用xadmin覆盖Django的admin