How Lazy Loading Images In a Slider Can Improve Performance and User Experience

Code is available in my GitHub repository.

Table of contents

Why lazy load slider images?

Lazy loading is a technique for deferring the loading of non-critical resources, such as images, until they are actually needed. When applied to an image slider, lazy loading can greatly improve the performance and user experience of the website. By only loading the images that are currently visible on the slider, the website can reduce the initial load time and save bandwidth. This is especially important for mobile devices with limited data plans and slower internet connections.

Another major benefit of lazy loading in an image slider is that it allows for a smoother and more seamless user experience. Instead of waiting for all the images to load before displaying the slider, lazy loading enables the user to interact with the slider immediately. As they swipe or click through the slider, the images will load in the background, ensuring that the slider never feels sluggish or unresponsive. This is particularly important for image-heavy websites, where a delay in loading can result in frustrated users and higher bounce rates.

Swiper with native lazy loading

<script>
  import Swiper, { Navigation, Pagination } from 'swiper';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import ‘swiper/css/pagination';
  import { onMount, onDestroy } from ‘svelte';
  import Image1 from '$lib/images/joshua-sortino-f3uWi9G-lus-unsplash.jpg';
  import Image2 from '$lib/images/joshua-sortino-gii7lF4y0WY-unsplash.jpg';
  import Image3 from '$lib/images/joshua-sortino-xZqr8WtYEJ0-unsplash.jpg';
  import Image4 from ‘$lib/images/richard-dorran-pyIGuqVX6k4-unsplash.jpg’;

  let images = [{ src: Image1 }, { src: Image2 }, { src: Image3 }, { src: Image4 }];
  let swiper;

  onMount(() => {
    swiper = new Swiper('.swiper-container', {
      lazy: true,
      modules: [Navigation, Pagination],
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    });
  });

  onDestroy(() => {
    if (!swiper) return;
    swiper.destroy();
  });
</script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    {#each images as image}
      <div class="swiper-slide">
        <img src={image.src} alt="" loading="lazy" />
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white" />
      </div>
    {/each}
  </div>
  <div class="swiper-button-next" />
  <div class="swiper-button-prev" />
  <div class="swiper-pagination" />
</div>

Let’s break it down.

import Swiper, { Navigation, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import ‘swiper/css/pagination’;

Swiper related imports.

import { onMount, onDestroy } from ‘svelte';

Svelte lifecycle hooks.

let images = [
  { src: Image1 },
  { src: Image2 },
  { src: Image3 },
  { src: Image4 },
];

Just some housekeeping to avoid duplicating code for every slide.

swiper = new Swiper(".swiper-container", {
  lazy: true,
  modules: [Navigation, Pagination],
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

Starting a Swiper instance with Navigation and Pagination modules and their respective configuration.

<img src="{image.src}" alt="" loading="lazy" />

Native lazy load implementation.

Swiper with Vanilla-lazyload

<script>
  import Swiper, { Navigation, Pagination } from 'swiper';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import { onMount, onDestroy } from 'svelte';
  import Lazyload from 'vanilla-lazyload';
  import { browser } from '$app/environment';
  import Image1 from '$lib/images/joshua-sortino-f3uWi9G-lus-unsplash.jpg';
  import Image2 from '$lib/images/joshua-sortino-gii7lF4y0WY-unsplash.jpg';
  import Image3 from '$lib/images/joshua-sortino-xZqr8WtYEJ0-unsplash.jpg';
  import Image4 from ‘$lib/images/richard-dorran-pyIGuqVX6k4-unsplash.jpg’;

  let images = [{ src: Image1 }, { src: Image2 }, { src: Image3 }, { src: Image4 }];
  let swiper;

  onMount(() => {
    if (browser && !document.lazyloadInstance) {
      document.lazyloadInstance = new Lazyload();
    }

    swiper = new Swiper('.swiper-container', {
      lazy: true,
      modules: [Navigation, Pagination],
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    });
  });

  onDestroy(() => {
    if (!swiper) return;
    swiper.destroy();
  });
</script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    {#each images as image}
      <div class="swiper-slide">
        <img data-src={image.src} alt="" class="lazy" />
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white" />
      </div>
    {/each}
  </div>
  <div class="swiper-button-next" />
  <div class="swiper-button-prev" />
  <div class="swiper-pagination" />
</div>

Very similar to the native example.

import Lazyload from ‘vanilla-lazyload';

Import the library.

if (browser && !document.lazyloadInstance) {
  document.lazyloadInstance = new Lazyload();
}

Instantiated vanilla-lazyload.

<img data-src="{image.src}" alt="" class="lazy" />

Instead of src use data-src attribute and loading attribute is replaced by a css selector.

Run the application from the repository. Navigate to http://localhost:5173. Open developer tools network tab. Click on the next image in the slider, see how an new request is made for every new slide.

In conclusion, using lazy loading with Swiper.js in a Svelte application can bring significant benefits to your website. By improving page speed, user experience, SEO, and accessibility, lazy loading can help create engaging and performant image sliders that enhance the overall user experience. Whether you choose to use native lazy loading or vanilla-lazyload, implementing lazy loading with Swiper.js is a relatively simple process that can bring big rewards.