search

Aljullu / react-lazy-load-image-component

React Component to lazy load images and components using a HOC to track window scroll position.
https://www.npmjs.com/package/react-lazy-load-image-component
MIT License
1.44k stars 109 forks source link

How to remove placeholder only when image fully loaded? #116

Open maglev99 opened 1 year ago

maglev99 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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.