2

I'm trying to implement image lazy loading for a side project using intersection observer API , the problem that i'm facing is that no matter how i'm adjusting the rootMargin for the x-axis (e.g '0px 300px 0px 0px) , the intersection seems to only happen on the viewport .

Expected: Image to be loaded when intersecting 300px away before entering the viewport .

Result: Image only loads when intersecting at viewport , which rootMargin seems to not be working on horizontal level.

Here is an example:

```https://codepen.io/daniel-yeh/pen/WNEzJWe?editors=1111```

Really hope that someone could help with this one , have absolutely no idea....

Yeh Daniel
  • 81
  • 5

1 Answers1

1

Had the same issue and this solution worked for me: https://stackoverflow.com/a/58625634/18598778

Basically you have to specify the root element to be a direct ancestor of the target.

ebukanas
  • 11
  • 1