Instead of listening to scroll event you should have a look at Intersection Observer (IO). This was designed to solve problems like yours. And it is much more performant than listening to scroll events and then calculating the position yourself. First, here is a codepen which shows a solution for your problem. I am not … Read more
None of the posted answered worked for me because of our configuration of TypeScript and React (tsx) we’re using. Here’s what finally worked: beforeEach(() => { // IntersectionObserver isn’t available in test environment const mockIntersectionObserver = jest.fn(); mockIntersectionObserver.mockReturnValue({ observe: () => null, unobserve: () => null, disconnect: () => null }); window.IntersectionObserver = mockIntersectionObserver; });
I think your lazy loading may be creating these issues. If you check where your image requests originate you can see it’s from the loadImage function in universal.js that directly sets the src attribute of the image. Maybe you could try the native browser lazy loading and skip the intersection observer shenanigans: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading