How to remove placeholder only when image fully loaded?

[maglev99]

Hi, is there a way to only remove the placeholder after the image is fully loaded/afterLoad() event is fired?

For slower loading images the placeholder will disappear but the image container will still be blank for several seconds before it slowly fills with the loaded image from top to bottom. It would be great to not show the image and display the placeholder until the image has completely loaded. Thank you!

[SaiRO97]

In my experience, this behavior happens when you use the placeholder prop instead of placeholderSrc. The image will also fill slowly, but the placeholder must wait until it is completely filled. If you want to haven't a fill, try playing with the effects of blurs and opacity. Hope it will help

[maglev99]

@SaiRO97 Thanks for the advice! What I ended up doing was set the width and height of the LazyLoadImage to 0 so that it still loads as expected when scrolled to on the viewport, and display the placeholder by default. When the image is fully loaded call afterLoad() to set the size of LazyLoadImage back to normal and make the placeholder hidden.