Implement Lazy Loading in Swiper to Defer Image Loading

Desired outcome

Configure a Swiper instance so that images inside slides are only downloaded when the slide becomes visible, reducing initial page load time and bandwidth usage.

Prerequisites

• A working Swiper installation (via npm, yarn, or a CDN).
• Basic knowledge of HTML, CSS, and JavaScript modules.
• Images you want to lazy‑load, each with a known URL.

Procedure

1. Import the Lazy module

   If you are using a bundler, import Swiper core and the Lazy module:

   import Swiper from 'swiper/bundle';
   import { Lazy } from 'swiper/modules';
   

   If you load Swiper from a CDN, ensure the Lazy module is included in the build (the default bundle already contains it).

2. Add the module to Swiper

   Pass the Lazy module to the modules array when you create the Swiper instance:

   const swiper = new Swiper('.my-swiper', {
     modules: [Lazy],
     // other options …
   });
   

3. Markup the slides

   For each slide, place an image with the class swiper-lazy and store the real URL in a data-src attribute. Add a placeholder element for the preloader:

   <div class="swiper-slide">
     <img class="swiper-lazy" data-src="https://example.com/images/photo1.jpg" alt="">
     <div class="swiper-lazy-preloader-preloader swiper-lazy-preloader"></div>
   </div>
   

   Repeat this pattern for every slide that should lazy‑load.

4. Optional: add a visual placeholder

   You can style the swiper-lazy-preloader to show a spinner or a blurred preview. Example CSS:

   .swiper-lazy-preloader {
     width: 48px;
     height: 48px;
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3498db;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: auto;
   }
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   

5. Configure lazy loading behavior

   Adjust how aggressively Swiper preloads neighboring slides:

   const swiper = new Swiper('.my-swiper', {
     modules: [Lazy],
     lazy: {
       loadPrevNext: true,   // load the next and previous slide images
       loadOnTransitionStart: true, // start loading as the slide transition begins
     },
   });
   

   Set loadPrevNext to false if you only want the active slide to trigger loading.

6. Verify the CSS is loaded

   Ensure the default Swiper CSS (or a custom build) includes the rules for .swiper-lazy and .swiper-lazy-preloader. If you omit the CSS, the placeholder will not appear and images may load immediately.

Expected checks

1. Network inspection

   Open the page in Chrome DevTools → Network tab, enable "Disable cache", and filter by "Img". As you scroll or swipe, image requests should appear only when the corresponding slide becomes active (or when loadPrevNext triggers).

2. DOM inspection

   Right‑click a slide → Inspect. Verify the <img> element has class="swiper-lazy" and a data-src attribute pointing to the correct URL. The swiper-lazy-preloader div should be present as a sibling.

3. Placeholder visibility

   Throttle the network to "Slow 3G" (DevTools → Network → Throttling). While scrolling, the preloader spinner should remain visible until the image finishes loading, confirming that the image was not requested earlier.

Recovery options (rollback)

If you need to revert to the default behavior (eager loading), simply remove the Lazy module and the lazy‑specific markup:

1. Delete Lazy from the modules array.
2. Remove the lazy option object.
3. Change each image back to a normal <img src="…"> tag and delete the swiper-lazy-preloader element.
4. Optional: remove the custom CSS for the preloader.

After these changes, reload the page and verify in the Network tab that all images are requested on initial load.