Lazy Loading and Fade Effect

[salomanov]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-lazy-load-images-fade-4mrgh8?file=%2Findex.html

Bug description

When using the "Fade" effect, all slides appear in the viewport, although they are hidden, so all images begin to load, although lazy loading is selected.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

v11.1.1

Platform/Target and Browser Versions

Windows, Chrome

Validations

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

Would you like to open a PR for this bug?

• [x] I'm willing to open a PR

[salomanov]

https://github.com/nolimits4web/swiper/issues/6582#issuecomment-1510904926 This method doesn't help

[solidblackt]

Correct, it's not working #6582.

Also, lazy load is not working with width:100% on the img tag. on page load it's loading first two image which is caused the issue.

[lkaisers]

Experiencing the same issue.

[saas786]

For me, the solution provided in https://github.com/nolimits4web/swiper/issues/6582#issuecomment-1510904926 GitHub comment does help.

However, if this fix is required for the fade effect to work by default, it should be included in the core CSS. It took me some time to figure this out.