页面如何实现滚屏加载？

Question

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

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

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

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

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

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

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