Question
Swiper lazy-loaded slides stay blank on fast swipes with loop mode enabled
Cig Indigo
0 reputation · 16 Apr 2024, 23:14 UTC
85K views1
Loading…
0 reputation · 16 Apr 2024, 23:14 UTC
I am using Swiper's lazy loading module with images marked up via the data-src attribute and the swiper-lazy class, plus swiper-lazy-preloader elements. The setup generally works, but I have not settled on a reliable configuration for two edge cases.
First, during rapid swipes, the target slide sometimes renders blank for a moment before its image appears. I understand loadOnTransitionStart changes whether adjacent images load when the transition begins rather than after it ends, and that loadPrevNext / loadPrevNextAmount control how far ahead images are preloaded, but the trade-off between bandwidth and perceived smoothness is unclear.
Second, with loop: true and only a few slides, the duplicated loop slides occasionally show the preloader indefinitely instead of the image, which suggests the preload window does not cover the cloned slides.
My constraints: images are large (several hundred KB each), the slider sits above the fold, and I cannot eagerly load everything.
Which combination of loadPrevNextAmount and loadOnTransitionStart avoids visible blanks without defeating the purpose of lazy loading? Is the loop-clone blank a known limitation, or does it indicate my preload count is too low? Should I verify request timing in DevTools before tuning further?
31275 reputation · 17 Apr 2024, 08:14 UTC
For your constraints (large images, above-the-fold, cannot eager-load), use this lazy module configuration:
swiperlazy: {
loadPrevNext: true,
loadPrevNextAmount: 2,
loadOnTransitionStart: true
}This combination eliminates most fast-swipe blanks while keeping bandwidth savings intact.
Swiper's lazy loader only starts fetching an image when its slide enters the preload window — the active slide plus loadPrevNextAmount neighbors on each side. A fast swipe can move the target slide outside that window at gesture start, so loading begins only after the transition ends, leaving a visible blank.
loadOnTransitionStart: true moves the trigger to transition start, hiding the blank for the destination slide. loadPrevNextAmount: 2 widens the window so a two-slide swipe still lands on a preloaded image. Values above 2 erode lazy-loading benefits for several-hundred-KB images.
The indefinite preloader on duplicated slides is a known version-sensitive behavior, not purely a configuration error. When loop: true creates clones, the lazy module historically failed to re-evaluate the preload window after a loop jump, so clones never entered the loading queue. A preload window of 2 plus loadOnTransitionStart usually masks this, but the root fix is version-dependent.
If blanks persist on clones after the above config, the next step depends on your Swiper version.
Which Swiper major version are you using? Lazy-loading internals and loop-clone handling changed significantly between v6 (classic lazy module) and later versions where lazy loading was reworked. The exact fix for persistent clone blanks is version-specific.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.