He actualizado mi sitio web para tener imágenes de carga diferida con swiper.js.

Cuando se carga la página y se inicia Swiper, Swiper establece incorrectamente la altura del div que contiene las diapositivas. Establece brevemente la altura en 460 px, que es la altura en el escritorio. Cuando se cargan las imágenes, la altura se actualiza a 186 px, lo que es correcto para dispositivos móviles.

Solo noté esto después de configurar la carga diferida.

¿Cómo puedo evitar que el swiper se inicie en el tamaño incorrecto?

Esto es lo que parece brevemente por un segundo. Ejemplo

La imagen de la diapositiva se rellena previamente con una imagen de marcador de posición, ancho 1200 px, alto 460 px. Luego, CSS establece la imagen en ancho 100% y alto automático;

Este es mi guión.

 const myswiperban = new Swiper('.swiper-container-ban-wide', { loop: true, pagination: { el: '.swiper-pagination-ban-wide', clickable: true }, navigation: { nextEl: '.swiper-button-next-ban-wide', prevEl: '.swiper-button-prev-ban-wide', }, slidesPerView:1, freeMode:true, autoplay: { delay: 3000 }, autoHeight:true, preloadImages: false, lazy: { loadPrevNext: true }, });

¿Algunas ideas?