Lighthouse fails with defer images

[docomoz]

Hey guys.
I use the carousel on my website. Beautiful gallery script, one of the best!
It works great, but I have a major issue with lazy loading.
F.e., this page: https://sibnovostroyki.ru/flora-fauna/ — Lighthouse tells me all my images aren't lazy:

It there any chance to fix this issue, and how?

[docomoz]

Here is the code I use to display the gallery:

<Carousel images={complex.carousel} shouldLazyLoad={true} hasThumbnails={complex.carousel.length > 1 ? true : false} hasThumbnailsAtMax={false} hasMediaButton={false} hasSizeButton={false} canAutoPlay={false} thumbnailWidth={'15%'} />

[yifaneye]

Hi @docomoz , thank you for using our carousel component. Your page looks fantastic!

I ran a lighthouse report on your page. I did see those images are not lazy-loaded. May I ask which version of react-gallery-carousel are you using? Thanks!

[yifaneye]

Thanks mate. I see that you use Gatsby, so I tried with my Gatsby example. There does not seem to be a problem with lazy loading.

May I get how your image object looks like, please? I would like to make sure you used srcset instead of srcSet. Since I can replicate the lazy loading issue with srcSet.

[docomoz]

Damn! )
Of course, I missed this part of the documentation and used the familiar srcSet.

I replaced it with srcset, lazy loading started working. Great! Thanks man!
But now there is an empty hole under the main picture. Is there any way to set the aspect ratio for the main picture?

[yifaneye]

Nice! 🥳

In regards to the "empty hole", this is avoided by the component. Please inspect the element, play around with it and let me know.

If you would like to override the style of the image, you can pass other props (in this case, "style") onto the img element via each image object. They will be placed here.

[docomoz]

Fixed it! :)
Here is my solution:

componentDidMount() { const carouselContainerWidth = document.getElementById('carouselContainer').clientWidth; this.setState({ carouselContainerHeight: (carouselContainerWidth * 0.8) });

...

constructor(props) { this.state = { carouselContainerHeight: 300 } }

...

<div id="carouselContainer" style={{ height: this.state.carouselContainerHeight }}><Carousel /></div>

[yifaneye]

@docomoz Awesome! This is nice to hear! Thanks for sharing your solution!