Actualmente, cuando cargo mi control deslizante desde swiper.js gatsby, la imagen carga automáticamente todas las imágenes aunque no sean visibles para el usuario final. Este no es el comportamiento que quiero. Solo quiero cargar las imágenes para la diapositiva visible o las diapositivas en miniatura visibles. ¿Alguien tiene una solución para esto?
Debe administrarse automáticamente ya que Gatsby agrega la carga diferida por defecto.
En gatsby-image (v2) : la propiedad de loading controla este comportamiento.
Establezca el atributo de carga diferida nativo del navegador. Uno de perezoso, ansioso o auto. El valor predeterminado es perezoso.
En gatsby-image-plugin (v3) : la misma propiedad loading controla este comportamiento:
Comportamiento de carga de la imagen. Debe establecer esto en "ansioso" para las imágenes de la mitad superior de la página para asegurarse de que comiencen a cargarse antes de la hidratación de React. El valor predeterminado es perezoso.
En Swiper, además, tienes un montón de propiedades que puedes subir al componente Swiper , en tu caso, lazy es lo que buscas:
let params = { // other props lazy: true, };Entonces solo úsalo como:
<Swiper {...params}> // your slides here </Swiper>