lazyloading swiper.js preloading the next image?

Is there a way to preload the next or two next images with a swiper.js while lazyloading is active?

The slider contains 100 images which we don’t want to load while the page opens for obvious reasons but we want the first and the two next images to be loaded to have them present within the next slide while the animation runs.

any ideas?

1 answer

  • answered 2021-08-12 13:38 Anwi77

    I am looking for the same thing, and looking at the swiperJS documentation, I stumbled upon the API settings for lazyloading.

    Looks like maybe loadPrevNext and loadPrevNextAmount might help us out.

    loadPrevNext (boolean, default:false)

    • Set to true to enable lazy loading for the closest slides images (for previous and next slide images)

    (I think they actually mean preload next and previous image, if I check other examples and demo's)

    loadPrevNextAmount (number, default: 1)

    • Amount of next/prev slides to preload lazy images in. Can't be less than slidesPerView

    So:

    const swiper = new Swiper('.swiper-container', {
      lazy: {
        loadPrevNext: true, // pre-loads the next image to avoid showing a loading placeholder if possible
        loadPrevNextAmount: 2 //or, if you wish, preload the next 2 images
      },
    });
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum