Previous slide images not loading (Centered slides + lazy loading + loop)

ntucakovic commented 5 years ago

When lazy loading is enabled with centered slides, slides appearing left of the active slide will not be loaded. Also when moving to previous slides, again images will not be loaded.

Demo: https://codesandbox.io/s/reactidswiper-center-slides-lazy-loading-wqpue Fix: https://codesandbox.io/s/reactidswiper-center-slides-lazy-loading-fixed-s7kh9

/**
 * When we set `centeredSlides` to `true`, slides before the active one aren't initially loaded.
 */
export function useLazyCenteredSlides(swiperInstance: SwiperInstance): void {
  const loadPreviousSlides = useCallback(() => {
    const slidesPerView = swiperInstance.params.slidesPerView;
    const activeIndex = swiperInstance.activeIndex;

    const loadPreviousTotal = Math.ceil(
      (slidesPerView !== "auto" ? slidesPerView : 2) / 2
    );
    for (let i = 0; i <= loadPreviousTotal; i++) {
      swiperInstance.lazy.loadInSlide(activeIndex - i);
    }
  }, [swiperInstance]);

  useEffect(() => {
    if (swiperInstance !== null) {
      loadPreviousSlides();
      swiperInstance.on("slideChange", loadPreviousSlides);
    }
  }, [swiperInstance, loadPreviousSlides]);
}

As you can see, it's not ideal. I don't have proper support in case Swiper is initialized with slidesPerView auto. So just work on top of that if you need to support that situation. I don't have that scenario in my swiper instances.

I'm not sure whether I should lift this issue to swiper repo.

akopichin commented 5 years ago

I had very similar issue. Looped swiper with 5 images in a view. Images got their src lazy and once I scoll back there are empty places instead allready loaded images.