Login With Github

Swiper API: Lazy Loading

To enable lazy loading, first of all we need special layout for images or elements with backround in slides:

<div class="swiper-container">
    <div class="swiper-wrapper">

        <!-- Lazy image -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- Lazy image with srscet-->
        <div class="swiper-slide">
            <img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- Element with lazy background image -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

        <!-- Lazy background image on slide itself -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

As you see:

  • Each lazy loaded image/element should have additional "swiper-lazy" class
  • Lazy image source for <img> element should be specified in "data-src" attribute instead of "src"
  • Lazy image source set for <img> element should be specified in "data-srcset" attribute instead of "srcset"
  • Lazy background image source should be specified in "data-background" attribute

You may also add animated preloader spinner to slide which will be removed automatically after image loaded:

<div class="swiper-lazy-preloader"></div>

Or white-one for dark layout:

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

After that we need to enable lazy loading on Swiper initialization:

var swiper = new Swiper('.swiper-container', {
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazy: true
});

If you use slidesPerView "auto" or slidesPerView > 1, then you should also enable watchSlidesVisibility and Swiper will load images in currently visible slides

Lazy Loading Parameters

Parameter Type Default Description
lazy object/boolean  

Enables images lazy loading. Object with lazy loading parameters or boolean true to enable with default settings. For example:

var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});

 

{
loadPrevNext boolean false Set to "true" to enable lazy loading for the closest slides images (for previous and next slide images)
loadPrevNextAmount number 1 Amount of next/prev slides to preload lazy images in. Can't be less than slidesPerView
loadOnTransitionStart boolean false By default, Swiper will load lazy images after transition to this slide, so you may enable this parameter if you need it to start loading of new image in the beginning of transition
elementClass string 'swiper-lazy' CSS class name of lazy element
loadingClass string 'swiper-lazy-loading' CSS class name of lazy loading element
loadedClass string 'swiper-lazy-loaded' CSS class name of lazy loaded element
preloaderClass string 'swiper-lazy-preloader' CSS class name of lazy preloader
}

Lazy Loading Methods & Properties

Methods
mySwiper.lazy.load(); Load/update lazy images based on current slider state (position)
mySwiper.lazy.loadInSlide(index); Force to load lazy images in slide by specified index

index - number - index number of slide to load lazy images in

Lazy Loading Events

Event name Arguments Description
lazyImageLoad slideEl, imageEl Event will be fired in the beginning of lazy loading of image
lazyImageReady   Event will be fired when lazy loading image will be loaded

0 Comment

temp