Delay Prop for placeholder to disappear.

This issue has been tracked since 2017-11-14.

Hey!

Is it possible to add a delay before the placeholder gets removed from the dom?
Then I could add a CSS animation so that the placeholder gets animated out when the image is ready.

Maybe there's a setting I can't find.

Thanks a lot! 💪

mthines wrote this answer on 2017-11-14

Also, I'm experiencing the lazyload not replacing the placeholder before you've stopped scrolling.

jasonslyvia wrote this answer on 2017-11-15

The default delay function for react-lazyload is debounce so you may not experience a lazy load effect before scroll stops, you can switch to throttle to change this behavior.

Another delay props sounds achievable, I'll add this to feature list and find some time to implement.

mthines wrote this answer on 2017-11-15

@jasonslyvia If you need help with the specs needed in order to do a great animation you can write me and I'll be happy to contribute. Ideal there should be added temporary classes that you can do CSS' animations from :)

mthines wrote this answer on 2017-11-15

@jasonslyvia But as illustrated in the gif below, even though throttle and debounce is set to false, it still doesn't render before I stop scrolling.

no render while scrolling

mthines wrote this answer on 2017-11-15

@jasonslyvia Alright, I got it working.
Here's the settings that did the trick for me.

debounce: 0,
throttle: 100,

I hope it helps if somebody else runs into the issue

jasonslyvia wrote this answer on 2017-11-16

@mads-thines speaking of animation, have you checked this demo? is that what you expected?

mthines wrote this answer on 2017-11-16

@jasonslyvia The animation I'm talking about is the one you can see in the end of the Gif I send.
The transition from the placeholder to the real photo, and then animation the filter: blur(); so the image blurs in :)

flikQ wrote this answer on 2021-05-07

@jasonslyvia @mthines did this delay prop ever get added? I am finding that there is a noticeable gap between when the Placeholder vanishes and the actual item appears.

My use case is I have a small video that is loading in, but a static image of that video is the placeholder, so the expected behaviour is that you it should visually just start playing seamlessly.

mthines wrote this answer on 2021-05-07

I ended up writing the whole lazy thing my self, which took less time actually.
So sorry, but i don't know.

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date