Comments (7)
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:
- 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 - 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.
Related Issues (20)
- scrollContainer invalid
- Lazyload not working with horizontal scroll HOT 1
- comp.visible didnt change when i use in table
- "resize" and "overflow" won't work together
- Not working with Material Ui FullScreen Dialog HOT 1
- scrollContainer does not work when there are two or more scrollContainers on a page containing LazyLoads HOT 3
- Option to force loading above-the-fold components
- Issue in Lazy Loading a component in react HOT 1
- SSR support HOT 2
- Package support HOT 2
- react 18 support HOT 17
- why not use MutationObserver do this?
- REACT-LAZYLOAD PLACE HOLDER NOT RENDER HOT 3
- Issue in new attribute【overflow:overlay】!!!!
- Does react-lazyload support nested list? HOT 1
- Build error: expected string or function, but got: object HOT 3
- Not working with react testing library HOT 1
- support for [email protected] HOT 9
- ERESOLVE unable to resolve dependency tree on nextjs and reactjs 18.2.0 HOT 3
- The first component loads more than once. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-lazyload.