swiper

swiper copied to clipboard

• Swiper Version: Swiper 6.4.15
• Platform/Target and Browser Versions: Google Chrome | 89.0.4389.69 (Offizieller Build) beta (64-Bit)

Config

loop: true,
preloadImages: false,
lazy: {
	checkInView: true,
	loadOnTransitionStart: true,
	loadPrevNext: true,
	loadPrevNextAmount: 1
}

Using a img-environment:

<img class="swiper-lazy" title="{{artwork.title}}" src="{{artwork.getThumb('webp')}}" data-src="{{ artwork.photo.path }}" style="width: {{artwork.imgwidth}}px;"/>

works as expected:

• Initial Slide: lazyImageReady is triggered
• Preloaded slides (+1, -1): lazyImageReady is triggered
• when I slide around: lazyImageReady is triggered as expected
• loading spinner is shown

Using a picture-environment:

<picture>
            <source type="image/webp" srcset="{{artwork.getThumb('webp')}}" data-srcset="{{ artwork.photo.path2 }}">
            <source type="image/jpeg" srcset="{{artwork.getThumb('jpg')}}" data-srcset="{{ artwork.photo.path }}">
            <img class="swiper-lazy" title="{{artwork.title}}" src="{{artwork.getThumb('webp')}}" data-src="{{ artwork.photo.path }}" style="width: {{artwork.imgwidth}}px;"/>
</picture>

works this way:

• Initial Slide: lazyImageReady is NOT triggered
• Preloaded slides (+1, -1): lazyImageReady is NOT triggered
• when I slide around: lazyImageReady is triggered as expected
• loading spinner is not shown

I do not understand this behaviour, but my slides require the lazyImageReady to work.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Yep, I'm noticing similar behavior with v7.3.1, lazyImageReady triggers too early and no spinner.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Swiper v9 doesn't lazy module anymore. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.