How to scroll and load the page?

the background of the project is that there is a data visualization page with multiple charts. Opening the page to load all the charts at once makes the page loading efficiency touching.

then I want to do something similar to anchor positioning and block loading, so as to achieve the function of shunting and improve the efficiency of page loading

.

but it is different from ordinary anchor positioning:

first, the trigger is triggered by the scrolling event of the page-when I scroll the current page to a data chart area, load the data in that visual area and render the chart

the current problem is how to associate scrolling listening events with partition loading logic:



I would like to ask you if there are any good and feasible ideas to achieve this function

Sep.22,2021

give each chart element an id, scroll to determine whether the element is in the visual area, and request if it is and there is no data.
you don't have to care about the height of each chart, just care about offsetTop < innerHeight + scrollTop;
or compare it directly with getBoundingClientRect () .top and innerHeight

.
Menu