[Feature Request] Lazy loading

[halafi]

hi there,
any plans to support only loading images in viewport (lazy-load)?

[a-ssassi-n]

Have you tried using this https://github.com/twobin/react-lazyload

import LazyLoad from "react-lazyload";
....
 <LazyLoad>
    <ProgressiveImage
        delay={2500}
        src={image}
        placeholder={placeholder_image}
    >
        {src => (
            <img
                src={src}
            />
        )}
    </ProgressiveImage>
</LazyLoad>

[halafi]

I didn't want to use both libraries unless I have to, but I can confirm that it works (not sure if this doesn't lead to unnecessary double loading of images).

I am curious how much work extending react-progressive-image would be to support lazy loading and if this would be desired PR or if it would solve different problem than what's the library purpose.

[brybrophy]

I think that it does solve a different problem than the intended purpose of react-progressive-image. I know from making past contributions to this package that it is always desirable to keep extraneous functionality separate. Plus, using a package dedicated to lazy loading to wrap your images seems to make a lot more sense, since the maintainers of that package will be able to keep it healthy. This package is barely maintained as it is.

[sanishkr]

I didn't want to use both libraries unless I have to, but I can confirm that it works (not sure if this doesn't lead to unnecessary double loading of images).

I am curious how much work extending react-progressive-image would be to support lazy loading and if this would be desired PR or if it would solve different problem than what's the library purpose.

@halafi You can use react-progressive-graceful-image