Unable to load images inside a scrolling div

[bijomon]

Hey @Merri, I was trying to use react-lazy but its not working.

The issue is regarding images inside a scrolling div.

The images inside a scrolling div which are in view-port gets loaded with the page load, but if I scroll the div the rest of the images coming to view-port are not getting loaded until the main scroll of the page is scrolled.

Hope you understand the issue, and your response regarding the same is highly appreciated.

[Merri]

You can use checkElementsInViewport:

import { checkElementsInViewport } from 'react-lazy'

...

<div id="yourComponentWhichHasOverflowStyle" onScroll={checkElementsInViewport}>

</div>

It is debounced so you can call it as much as you like without a performance hit.

For now I've opted for manual triggering instead of automatic detection of cases like this as I've preferred to keep the code minimal.

[bijomon]

Hey @Merri, the solution worked.
Thanks a lot.

[Merri]

You're welcome :)