Add Lazy Loading for the Images

[choozn]

It would be awesome if you could add support for lazy loading. The browser seems to have a hard time loading a lot of images at the same time. Lazy loading is the fix for that. This could be implemented directly in the library or by adding the option to supply the library with a custom image component. I personally would prefer the second option, as it allows for further customization beyond custom styling. This could include overlays, buttons or custom onClick handlers.

[OriAmir]

Hi @choozn thanks ! We have few options here:

1. We can add a prop to the img inside the library of lazy - if it's true we will just add to the img element the loading properly: loading=lazy , this way it's will load only the relevant images on screen.
2. We can just add this property as default to the image loading=lazy.
3. We can use something like the library react-lazy-load-image-component that give us some benefits like effect,placeholder,etc.
4. Implement something basic ourselves with combination of loading=lazy and img onLoad event. This way we could get loading component + lazy as props from user.
5. Do something more complicated then basic img lazy property , something like that https://codepen.io/imagekit_io/embed/EpqXGW for better experience and without using another another library. See demo here https://youtu.be/BXoNamwkqi0

WDYT?

[choozn]

I think option four does seem like the perfect deal between all of them. I prefer that we have full control over the lazy loading component instead of relying on another dependency. Besides that I really like the idea of giving the user the possibility to pass a placeholder component as a prop.

[OriAmir]

Looks like we maybe have a problem to add the lazy bevihour because the img height is not fixed:

  max-width: ${({ maxWidth }) => maxWidth}%;
  height: auto;

therefore the browser consider that all images are inside the viewport and download all of them instead "lazy".

similar case: https://stackoverflow.com/questions/23416880/lazy-loading-with-responsive-images-unknown-height?answertab=modifieddesc#tab-top

I will try to see if there is any solution for that case,any idea?

[OriAmir]

I still not have a time to discover it deeply , wdyt @choozn ?

[OriAmir]

I created an issue for that:https://github.com/OriAmir/React-Responsive-Gallery/issues/37 I tried to implement that on V4 but looks like it's not easy since lazy loading requires a fixed height of the images and it's not possible via this kind of library.

Close that for now, will update if there is any update in the