Lazy Loading and Fade Effect

salomanov commented 5 months ago

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 commented 5 months ago

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

solidblackt commented 5 months ago

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 commented 5 months ago

Experiencing the same issue.

saas786 commented 2 months ago

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.

nolimits4web / swiper