Lazyload image of ParallaxBanner

[Dominic Garms]

Hello

I really like your work on this library, it works flawless! Are there any technique in place to lazyload banner images or even support srcSet?

Thanks

[J Scott Smith]

@dohomi so if you are using ParallaxBanner unfortunately not since it is setup using background images internally.

But I think it would be a good improvement to update the ParallaxBanner component to use img elements so there could easily be support for srcSet and loading attributes.

I'll leave this open and look into updating the banner next week.

If you need something quickly, you can copy source for the banner and implement your own with img elements.

[Dominic Garms]

@jscottsmith I am using NextJS image at the moment, but your suggestion will definitely be a huge improvement.

[J Scott Smith]

Good to know. In that case it may be even more flexible to allow for any image component to be composed within the banner.

Potentially something like this and just removing the layers prop:

<ParallaxBanner>
  <BannerLayer speed="-20">
    <NextImage src="foo.jpg" />
  </BannerLayer>
  <BannerLayer speed="-10">
    <NextImage src="bar.jpg" />
  </BannerLayer>
<ParallaxBanner>

[Dominic Garms]

@jscottsmith that is definitely the most flexible way to go. One question: isn't BannerLayer then almost the same as Parallax component itself? Maybe it could be reduced to:

<ParallaxBanner>
  <Parallax speed="10">
    <img />
  </Parallax>
  <Parallax>
    <h3>some content</h3>
  </Parallax>
</ParallaxBanner>

Or is there any difference between a layer and a parallax item? Not 100% sure what the ParallaxBanner wrap is purposely doing?

[J Scott Smith]

Not quite, couple things need to happen to make these banners layers work differently from the normal Parallax elements:

1. Hide overflow and set position which is done in the parent element ParallaxBanner
2. And in each child, the layer needs to be expanded with negative top and bottom values based upon the amount it moves (speed or translateY values determine the amount) -- otherwise the edge of the layer would become visible.

[Dominic Garms]

Thanks for the clarification. I totally would vote for a BannerLayer component but either way, currently I archive the same with the children prop. But I guess cleaner approach would be a component rather than an array of props.