Currently when I load my slider from swiper.js gatsby image automatically loads all of the images even though they are not visible to the end user. This is not the behavior I want. I want to only load the images for the slide visible or thumbnail slides visible. Does anyone have a solution for this?
1 Answers
It should be managed automatically since Gatsby adds the lazy loading by default.
In
gatsby-image(v2): theloadingproperty controls this behavior.Set the browser’s native lazy loading attribute. One of lazy, eager or auto. Defaults to lazy.
In
gatsby-image-plugin(v3): the sameloadingproperty controls this behavior:Loading behavior for the image. You should set this to "eager" for above-the-fold images to ensure they start loading before React hydration. Defaults to lazy.
In Swiper, in addition, you have a bunch of properties that you can lift to the Swiper component, in your case, lazy is what you are looking for:
let params = {
// other props
lazy: true,
};
Then just use it like:
<Swiper {...params}>
// your slides here
</Swiper>
Related