页面如何实现滚屏加载？

Question

项目背景是有一个数据可视化页面，页面是有多个图表。一次打开页面加载所有图表导致页面加载效率感人。

然后我想做类似与锚点定位，分块加载的方式，达到分流的作用，实现页面加载效率提升的目的

但是又和普通的锚点定位有所不同：

首先，触发方式是用页面的滚动事件来触发——当我滚动当前页面到某一数据图表区域的时候，再加载该可视区域的数据，并渲染图表

目前的问题是，如何将滚动监听事件与分区加载逻辑想关联：

因为图表的高度并不是固定的，而是动态改变的

想问问大家要实现这个功能，有没有好的可行的思路

Answer 1

给每个图表element一个id，滚动时判断这个element是否在可视区域内，如果在且无数据就请求。你不用关心每个图表的高度，只要关心offsetTop < innerHeight + scrollTop；或者直接用getBoundingClientRect().top和innerHeight比较