Images to do not lazy load with EffectFade enabled

[LiamWinterton]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-react-lazy-load-images-forked-t3dd5z?file=%2Fsrc%2FApp.jsx%3A14%2C92

Bug description

With EffectFade enabled, images no longer lazy load.

For larger sliders, this can ruin page speed. As is unfortunately the case for me.

A suggestion for a work around for this was to set non critical slides to visibility: hidden, which for me breaks the functionality of the entire slider.

Expected Behavior

I would expect images to lazy load.

Actual Behavior

Images do not lazy load.

Swiper version

^11.0.5

Platform/Target and Browser Versions

Windows, Chrome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[nolimits4web]

Lazy loading is handling by the browser. You can try to add the following CSS rule for a workaround:

.swiper-slide:not(.swiper-slide-active, .swiper-slide-next, .swiper-slide-prev) img {
      display: none;
    }