How to lazy load images in swiper that are not yet in viewport?

See original GitHub issue

Is your support request related to a problem? Please describe. I am using swiper and only the image that’s currently the viewport lazy loads, the other ones only load after swiping. I’m suspecting that this is intentional, but it creates a bad UX if each image only loads when it is swiped into the viewport (= delay). I also tried to use scrollingPanel solution (by adding a div around swiper and/or within swiper). Doesn’t work either.

To Reproduce Steps to reproduce the behavior:

<!-- Swiper -->
<div class="row text-center swiper" style="max-height: 100%;">
   <div class="swiper-container">
      <div class="swiper-wrapper d-flex my-auto">
         <div class="swiper-slide">
            <img class="lazy image_1 img-fluid swiper-900px"
            src="https://via.placeholder.com/1000x560?text=persona1_backup"
            data-srcset="https://via.placeholder.com/1000x560?text=persona1 600w,
                         https://via.placeholder.com/1000x560?text=persona1_large 1000w"
            >
         </div>
         <div class="swiper-slide">
            <img class="lazy image_1 img-fluid swiper-900px"
            src="https://via.placeholder.com/1000x560?text=persona2_backup"
            data-srcset="https://via.placeholder.com/1000x560?text=persona2 600w,
                         https://via.placeholder.com/1000x560?text=persona2_large 1000w"
            >
         </div>
      </div>
      <div class="swiper-pagination"></div> <!-- Add Pagination -->
      <div class="swiper-button-prev"></div> <!-- Add Arrows -->
      <div class="swiper-button-next"></div> <!-- Add Arrows -->
   </div>
</div>
<!-- Swiper end -->

Expected behavior Once the first image in swiper is in viewport, all images in that swiper should load instantly (that the user can swipe without loading delay for each image)

LazyLoad version Please report which version of LazyLoad you’re using. 17.5.0

Desktop (please complete the following information): Chrome, Firefox

Screenshots

Additional context

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:22 (17 by maintainers)

Top GitHub Comments

4reactions

verlokcommented, Nov 13, 2021

Hey @gitbrutus, I’m going to assume you solved and I’m closing this. Feel free to reopen otherwise.

If you’re happy with my support, the documentation and the effort I’ve been putting on this project in the latest years, I hope you might want to buy me a coffee to show your appreciation. Or sponsor me, if you’re a fan.

Open-source software is great for everyone, but it takes passion and time (and coffee!) to grow and evolve.

Thank you for thinking about it. Have a wonderful day!

3reactions

verlokcommented, Oct 27, 2021

Jeez, I’ve found an even more elegant and efficient solution. The following code is more organized and elegant to read, plus it also lazyloads the images that falls outside the viewport boundaries of the first Swiper.

const swiperOptions = {
  loop: true,
  slidesPerView: "auto",
  spaceBetween: 20,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: {
    // LazyLoad swiper images after swiper initialization
    afterInit: (swiper) => {
      new LazyLoad({
        container: swiper.el,
        cancel_on_exit: false
      });
    }
  }
};

// Initialize the first swiper right away
const eagerSwiper = new Swiper(".swiper--eager", swiperOptions);

// Initialize all other swipers as they enter the viewport
new LazyLoad({
  elements_selector: ".swiper--lazy",
  unobserve_entered: true,
  callback_enter: function (swiperElement) {
    new Swiper("#" + swiperElement.id, swiperOptions);
  }
});

The online demo is updated. Let me have your feedback!

Top Results From Across the Web

An elegant technique to lazyload images in Swiper, and lazily ...

The following technique is about lazy loading images inside an instance of Swiper JS, and also lazily creating the Swiper instances ...

Lazy Load the swiper slider images when it is not in viewport

Expected Outcome: Swiper Lazy Load should be enabled when the page reaches the viewport. Till then Lazysizes will control the images loading.

Swiper with lazy loading and auto slides per view does not ...

I am having some issues using swiper with lazy loading images and auto slides per view, I have tested all swiper options and...

Lazy Loading - Swiper JS - CodePen

<div class="swiper-slide">. 4. <img class="swiper-lazy" src='https://res.cloudinary.com/dsderm9xw/image/upload/v1604360030/slide1_agffti.png'.

v8.4.5 types/modules/lazy LazyOptions - Swiper

Properties ; Defined in swiper/types/modules/lazy.d.ts:41. Enables to check is the Swiper in view before lazy loading images on initial slides ; Defined in...