Swiper lazy-loading behavior with preloadImages false and external libraries

Question

When configuring Swiper for a low‑traffic site, the goal is to reduce bandwidth by deferring image loading until slides become visible. The documented lazy‑loading plugin supports lazy: { loadPrevNext: true } and, when combined with preloadImages: false, should prevent any images from being fetched before they are needed.
In many projects, a third‑party image lazy‑load library (e.g., lazysizes) is also applied to the same img elements. The concern is that Swiper’s lazy‑loading may still trigger a fetch for an image that the external library has already queued, leading to duplicate network requests and wasted bandwidth.
To clarify this interaction, we need to understand whether Swiper’s lazy‑loading respects the preloadImages: false flag when a third‑party lazy‑load script is active, and how to configure both tools to avoid double‑loading.
1. Does Swiper’s lazy‑loading plugin honor preloadImages: false when a third‑party image lazy‑load library is also attached to the same img tags?
2. If not, what configuration or ordering of initialization ensures that only one lazy‑load mechanism triggers the network request?
3. Are there known Swiper versions where this interaction is documented or fixed?

Wasi · Answer

Interaction Between Swiper and Third-Party Lazy Loading
Swiper’s lazy-loading plugin does honor the preloadImages: false flag; it prevents Swiper from automatically setting the src attribute on images until the slide enters the viewport or is queued via loadPrevNext. However, this flag only controls Swiper's internal logic. It does not prevent an external library (such as lazysizes) from independently detecting the image and triggering a fetch.

The Cause of Duplicate Requests
Duplicate network requests occur because both mechanisms are monitoring the same elements. If an external library is configured to watch data-src attributes, it may trigger a fetch based on its own intersection observer settings. When Swiper subsequently activates that slide, it may attempt to set the src again or trigger its own loading sequence, resulting in two requests for the same asset.

Recommended Configurations
To avoid bandwidth waste, you must ensure only one entity manages the src attribute. Choose one of the following two strategies:

Option A: Delegate Entirely to Swiper (Recommended)
Remove the external lazy-load attributes (e.g., class="lazyload") from images within the Swiper container. This ensures the external library ignores these elements entirely.
const swiper = new Swiper('.swiper-container', {
  preloadImages: false,
  lazy: {
    loadPrevNext: true,
  },
});

Option B: Delegate Entirely to the External Library
Disable Swiper's lazy-loading plugin and let the external library handle the intersection observer. In this scenario, Swiper simply moves the slides, and the external library fetches the image when it becomes visible.
const swiper = new Swiper('.swiper-container', {
  // Disable Swiper lazy loading
  lazy: false,
  preloadImages: false,
});

Version Considerations
In Swiper 6.x and newer, preloadImages: false is correctly honored. Users of Swiper 5.x should be aware that some early releases contained bugs where preloadImages: false was ignored when lazy: true was enabled, making an upgrade highly recommended for bandwidth-sensitive sites.

Verification Steps

Open the browser Network panel and filter by Img.
  Refresh the page and verify that no images from the slider are fetched on initial load.
  Slide to the next image and confirm that exactly one request is made per image.

Diagnostic Detail: Are you using a custom lazyClass in Swiper that overlaps with the CSS class used by your external library?

Swiper lazy-loading behavior with preloadImages false and external libraries

1 answer

Interaction Between Swiper and Third-Party Lazy Loading

The Cause of Duplicate Requests

Recommended Configurations

Option A: Delegate Entirely to Swiper (Recommended)

Option B: Delegate Entirely to the External Library

Version Considerations

Verification Steps

Your perspective belongs here.

0 question comments