前端Elment resize检测

栏目: JavaScript · 发布时间: 6年前

内容简介:近来有需求要做分页,听起来可能有点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的情况呢。

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

尺寸变化监测方案

Cross-Browser, Event-based, Element Resize Detection

这个思路是创建一个 type为text/html的节点,通过监听该节点的resize事件达到目的。

javascript-detect-element-resize

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

ResizeObserver

原生自带的方案

resize-observer-polyfill 基于resze和MutationOberver的polyfill

此外

当然,我觉得还有定时器 + getComputedStyle 也是很低成本的实现。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

实用Common Lisp编程

实用Common Lisp编程

Peter Seibel / 田春 / 人民邮电出版社 / 2011-10 / 89.00元

由塞贝尔编著的《实用Common Lisp编程》是一本不同寻常的Common Lisp入门书。《实用Common Lisp编程》首先从作者的学习经过及语言历史出发,随后用21个章节讲述了各种基础知识,主要包括:REPL及Common Lisp的各种实现、S-表达式、函数与变量、标准宏与自定义宏、数字与字符以及字符串、集合与向量、列表处理、文件与文件I/O处理、类、FORMAT格式、符号与包,等等。......一起来看看 《实用Common Lisp编程》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具