search

Aljullu / react-lazy-load-image-component

React Component to lazy load images and components using a HOC to track window scroll position.
https://www.npmjs.com/package/react-lazy-load-image-component
MIT License
1.46k stars 110 forks source link

The scrollPosition prop of HOC trackWindowScroll always return "null" #101

Open huynlx opened 2 years ago

huynlx commented 2 years ago

Bug description The scrollPosition prop of HOC trackWindowScroll always return "null". I think it should return a object {x,y} ?

Aljullu commented 2 years ago

Hi @Huynh12345678, thanks for opening this issue! Can you try passing useIntersectionObserver: false as a prop? If it's set to true and the browser supports intersection observer, trackWindowScroll will default to null:

https://github.com/Aljullu/react-lazy-load-image-component/blob/0b2e6d861a558221581d0775c565bb6076cac3bd/src/hoc/trackWindowScroll.js#L121-L123

huynlx commented 2 years ago

Hi @Huynh12345678, thanks for opening this issue! Can you try passing useIntersectionObserver: false as a prop? If it's set to true and the browser supports intersection observer, trackWindowScroll will default to null:

https://github.com/Aljullu/react-lazy-load-image-component/blob/0b2e6d861a558221581d0775c565bb6076cac3bd/src/hoc/trackWindowScroll.js#L121-L123

Oh, so i don't necessarily use trackWindowScroll if the browser supports intersection observer ?

huynlx commented 2 years ago

Hi @Huynh12345678, thanks for opening this issue! Can you try passing useIntersectionObserver: false as a prop? If it's set to true and the browser supports intersection observer, trackWindowScroll will default to null:

https://github.com/Aljullu/react-lazy-load-image-component/blob/0b2e6d861a558221581d0775c565bb6076cac3bd/src/hoc/trackWindowScroll.js#L121-L123

And how to setState loaded from true to false when changing img src in the same component ? Because i want it to rerun the effect when changing the img src on the same component

Aljullu commented 2 years ago

Oh, so i don't necessarily use trackWindowScroll if the browser supports intersection observer ?

If you only want to use LazyLoadImage or LazyLoadComponent, it shouldn't be necessary. react-lazy-load-image-component tries to use the native Intersection Observer because it's more performant.

trackWindowScroll is still there for compatibility with old browsers or in case you need to manually have access to the window scroll position.

And how to setState loaded from true to false when changing img src in the same component ? Because i want it to rerun the effect when changing the img src on the same component

I would try setting a different key prop to the component, so React remounts it.

Hope it helps! :slightly_smiling_face: