Swiper lazy-loaded slides stay blank on fast swipes with loop mode enabled
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?