Модули: Lazy Loading

Начиная с версии 9, Swiper не имеет специального API отложенной загрузки, поскольку он использует встроенную функцию отложенной загрузки браузера. Чтобы использовать отложенную загрузку, нам просто нужно установить loading="lazy" для изображений и добавить элемент предварительной загрузки:

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- Lazy image -->
    <div class="swiper-slide">
      <img src="/path/to/picture-1.jpg" loading="lazy" />
      <div class="swiper-lazy-preloader"></div>
    </div>

    <!-- Lazy image with srcset -->
    <div class="swiper-slide">
      <img
        src="/path/to/logo-small.png" srcset="/path/to/logo-large.png 2x"
        loading="lazy"
      />
      <div class="swiper-lazy-preloader"></div>
    </div>
  </div>
</div>

Как вы видите:

• изображения должны иметь атрибут loading="lazy"
• Добавьте к слайду анимированный элемент (какой-нибудь спиннер или глубокомысленную концептуальную анимацию с геометрической абстракцией), который будет автоматически удален после загрузки изображения

<div class="swiper-lazy-preloader"></div>

 Для тёмной темы можно использовать CSS-класс swiper-lazy-preloader-white.

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>