It seems suitable to narrow the default root for the intersection observer interface (viewport) down to a horizontal bar in the upper viewport. Whenever an element enters this zone a reload should be triggered.
Edit:
Why? IOs are the way to got for this use case. Since scrolling isn't the information we are looking for but rather, which pb-representing elements are entering or leaving view port. Such we trigger a) less and b) only relevant events.
once the page is loaded, the io does the job really well.
There are two cases that need a different approach:
initial loading: based on the variety of possible page designs it cant be taken for granted, that the initial pb-element is intersecting with the relevant region -> we need an extra "load top viewport image" function
when loading the page with an anchor the browser jumps to the anchor element (smoth scrolling doesn't change this!). So no intersection of the previous elements happen. -> we need an extra "load top viewport image" function
It seems suitable to narrow the default root for the intersection observer interface (viewport) down to a horizontal bar in the upper viewport. Whenever an element enters this zone a reload should be triggered.
Edit: Why? IOs are the way to got for this use case. Since scrolling isn't the information we are looking for but rather, which pb-representing elements are entering or leaving view port. Such we trigger a) less and b) only relevant events.