While using an Intersection Observer, is it possible to trigger an intersection before the image is on the page?

Question

I'm currently implement lazy load. Without lazy load, My app is experiences a major slow down when displaying over 100 images. So the solution was to change the image source once it's visible.

However, it triggers a bit too late as I'm loading an image once the images intersects. It causes some flickering and was wondering if I can mess with the rootMargin somehow where it would trigger intersecting way before it actually reaches the actual viewport.

I have tried using positive and negative margins such as: '1000px' '0px 0px 100%'. Not exactly sure what I'm messing with or if there is another work around.

Answer 1

You should be using virtualization for this, instead of intersections observers that you handle manually.

If you use react check out: React Window

If you use vanilla js or jquery consider: Virtualized list

Virtualization helps you fix that problem automatically. Learn more about virtualization here