react-scroll-parallax
react-scroll-parallax copied to clipboard
Lazyload image of ParallaxBanner
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
@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.
@jscottsmith I am using NextJS image at the moment, but your suggestion will definitely be a huge improvement.
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>
@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?
Not quite, couple things need to happen to make these banners layers work differently from the normal Parallax
elements:
- Hide
overflow
and setposition
which is done in the parent elementParallaxBanner
- And in each child, the layer needs to be expanded with negative
top
andbottom
values based upon the amount it moves (speed
ortranslateY
values determine the amount) -- otherwise the edge of the layer would become visible.
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.