Not compatible with Swiper Lazy Load

[dmoKruso]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Not able to run this... It says the folder info doesn't exist. Seems the wrong command.

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I've a slide of images using Swiper.js library and next/previous images just loads when they kick in, when the slide goes to the next/previous it should be already loaded.

So, basically, when I try to use lazy load from swiper, so it can load the next and previous image from a slide before it slides, it doesn't work with next image. Would be great if we could add swiper requirements:

• Each lazy loaded image/element should have additional "swiper-lazy" class (Possible)
• Lazy image source for element should be specified in "data-src" attribute instead of "src" (Not possible)
• Lazy image source set for element should be specified in "data-srcset" attribute instead of "srcset" (Not possible)
• Lazy background image source should be specified in "data-background" attribute (Not possible)

To bypass this issue, I added loading = eager to next image, so it can load right away.

Expected Behavior

I was expecting a way to add data-src, data-srcset and data-background

To Reproduce

Just install Swiper.js, create a slide of images with next image component with lazy load enabled on next image and even with swiper lazy load enabled to get next/prev images:

  lazy={{
                enabled: true,
                loadPrevNext: true,
                loadPrevNextAmount: 1,
                loadOnTransitionStart: true,
              }}

[shahbazmancho]

@dmoKruso i am facing the same issue, next/image only cares only on its loading=(priority/lazy).Did you find any solution?

[dmoKruso]

Try to add className="swiper-lazy" to your next Image component

[sanderkooger]

Having this issue too. We have galleries with 100 plus images so its kind of an issue

[evrazi]

@dmoKruso I have the same problem with loadPrevNext. But I also can't get lazy loading to work after deployment to Vercel. I added className="swiper-lazy" but it is still the same.

When deployed it throws:

Bad request

INVALID_IMAGE_OPTIMIZE_REQUEST

Did you find any solutions?

[sanderkooger]

You invalid optimize request is unrelated to this issue.

Could you Share your image component and your nextjs image config please?

[evrazi]

@sanderkooger
It's related.

Code for img comp:

  <Swiper
    loadPrevNext={true}
    loadPrevNextAmount={1}
    lazy={true}
    effect={"fade"}
    pagination={{
      type: "fraction",
    }}
    modules={[Keyboard, EffectFade, Pagination, Lazy]}
    navigation={true}
    spaceBetween={30}
    className="mySwiper"
    loop={true}
  >
    {images.map((image) => (
      <SwiperSlide key={image.id}>
        <div
          style={{
            height: "300px",
            width: "100%",
            position: "relative",
          }}
        >
          <Image
            priority
            data-src={image}
            layout="fill"
            objectFit="cover"
            className="swiper-lazy"
          />
        </div>
      </SwiperSlide>
    ))}
  </Swiper>

Using <img/> also doesn't work for some reason. Switch this with whats inside <div/>

<img
data-src={s}
className="swiper-lazy"
height="300px"
width="100%"
/>

[sanderkooger]

thats strange because it does work here. Ohh I see try with the default animation, lazy breaks it

[evrazi]

@sanderkooger It doesn't matter, both versions work in dev (albeit the load time is incredibly slow). But none work deployed. That is what I was trying to say with that error message. The only problem with fade animation I have seen is that the next/prev image needs to load before it can be animated, this means that sometimes it can look like it's not working. But it's just the animation waiting so it can start.
This could be due to some stuff with Next13 or just Vercel hosting. I have no idea at this time.

[sanderkooger]

Ok, I have been doing some testing.... In my situation, it seems like lazy loading is being broken by the transition (fade). Disabling the transition fixed the issue.

Im guessing that with the fade animation, all images are in viewport and therefore all images are loaded instantly.

[sanderkooger]

nolimits4web/swiper#1932 the issue is old but still valid

[sanderkooger]

I just tested nd it does work on vercel, just not with the fade animation

<Box
        component={Swiper}
        sx={styles.swiper}
        initialSlide={setInitialSlideIndex || 0}
        pagination={{ type: 'bullets', clickable: true }}
        speed={75}
        // effect="fade"
        // fadeEffect={{ crossFade: true }}
        rewind
        autoplay={{ delay: 3000 }}
        lazy={{
          enabled: true,
          loadPrevNext: true,
          loadPrevNextAmount: 2,
          loadOnTransitionStart: true
        }}
        centeredSlides
        slidesPerView={1}
        spaceBetween={0}
        onActiveIndexChange={onActiveIndexChange}
        grabCursor
        navigation={{
          prevEl: `.${prevClass}`,
          nextEl: `.${nextClass}`
        }}
        onSwiper={setSwiperInstance}
      >
        {cards.map((slide) => {
          return (
            <SwiperSlide key={slide.id}>
              <GalleryMainImage
                loading={slide?.loading}
                blurUrl={slide?.blurUrl}
                priority={slide?.priority}
                imgUrl={slide?.imgUrl}
                width={slide?.width}
                height={slide?.height}
              />
            </SwiperSlide>
          );
        })}
      </Box>

[evrazi]

No one else can test this. When showing code do not show code from your personal file/project. Create a minimal reproducible example.
https://stackoverflow.com/help/minimal-reproducible-example

[sanderkooger]

No one else can test this. When showing code do not show code from your personal file/project. Create a minimal reproducible example. https://stackoverflow.com/help/minimal-reproducible-example

@evrazi , It is not my job to build you examples for things you can not get to work. I share something with you voluntarily. in my free time in an best effort to help.

https://thisisfashion.tv/collections/shiatzy-chen/2022/ss-23/front-row/01

Im telling you that in our case on https://thisisfashion.tv/collections/shiatzy-chen/2022/ss-23/front-row/01 Vercel inside of nextjs it works. I am not the one that created this issue. Just someone who shares some knowledge.

Apparently you do experience this problem, so maybe just maybe build en example of your issue yourself. Keep in mind that you are not entitled to my time because you have an issue. Then after this reaction i will start thinking if i will help to solve the issue. cappiche?

[7alip]

Have you tried using Lazy module?

import SwiperCore, { Lazy } from "swiper"
SwiperCore.use([Lazy])

[AlexMath23]

This worked! thanks !

[VladimirMikulic]

As of Swiper v9.0.0, adding loading="eager" is the only way for it to work.
If loading attribute is not present or it's set to lazy, then you'll get TypeError: Cannot read properties of undefined (reading 'slideClass')

[natterstefan]

Hi @VladimirMikulic,

could you please share the code with me you used to get Swiper@9 working with Next and Lazy loading? Thank you.

[VladimirMikulic]

Hi @natterstefan! As far as I know, there isn't really a way to get Swiper@9 Lazy load to work with Next.js (if route is rendered/prerendered on the server). The workaround for me was to add loading="eager" to all images inside SwiperSlide. This is exact opposite of the effect lazy loading achieves but this is the only way to get Swiper (with images) to work with Next.js.

[wSzki]

Managed to get lazy loading working with fade effect on images by setting them to display:hidden first, then switching to display:flex when needed

<Image
	loading={lazy?'lazy':'eager'}
	className={lazy?'hidden':'flex'}
	src={src}
/>

[alabbas-ali]

I am having an issue when adding lazy loading with next js :

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11099:18)

Swiper version 11.1.0

[rajuprasad-dev]

have you got solution for this?

[alabbas-ali]

No, I don't think they are compatible at all. I just disabled the lazy loading for now and did more image optimization. then had to limit the number of images in the product item to 3 so the load time of the page still acceptable

[zeljko-bilandzija]

SwiperSlide component shoud have lazy property set to the true, Image component must have loading set to the "lazy" and just add

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

within swiper slide after Image component.