Image does not render until scroll stops on the lazyloader element about react-lazyload HOT 7 CLOSED

Well if I use throttling, then also same issue will occur but in a different measure

It is important to render elements from top to bottom to avoid flicking experiece of the page

from react-lazyload.

Hi @prchando , I believe there are 2 ways to solve this issue:

1. pass debounce={false} throttle={false} to disable all delay function, but it's not recommended because you might suffer from frequent updates and maybe visual lags
2. set appropriate height props for every lazy loaded images, doing this ensures that when users scroll down, while the image is not loaded, the place it will occupy is rendered, so no more flicking.

<LazyLoad height={300}>
  <img src="my-cat.png" width={200} height={300} />
</LazyLoad>

from react-lazyload.

@jasonslyvia Well contents are dynamic in nature, you never know the height based on the dynamic data or different image.
For responsive image (), it even becomes more difficult.

from react-lazyload.

@jasonslyvia It would be also optimum to provide a hook for loading the resources not only when user scroll but when it is idle. So essentially while we can render page fast without rendering hidden parts, it is good to load hidden parts proactively before scroll, if it is idle

from react-lazyload.

I'm afraid without a well-assumed height for your lazy loaded components, it would be tough to 'lazy load' them.

Imagine a document populated with lazy loaded components, at the first render, the document is blank, which means the document has no height, how can you determine if the lazy loaded components should become visible?

It would be possible to render them one by one, and check viewport size change and visibility after each one rendered, but it's over optimized and will cause unnecessary rerender.

from react-lazyload.

@jasonslyvia I tried with placeholder and that makes things better with original problem. Thanks
You can close this topic

from react-lazyload.

Glad you work it out, btw, placeholder is another way to set height, but by CSS not props.

from react-lazyload.