How do I Lazy Load Gatsby-Plugin-Image with Swiper?

Question

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?

Answer 1

It should be managed automatically since Gatsby adds the lazy loading by default.

• In gatsby-image (v2): the loading property 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 same loading property 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>