lazyloading swiper.js preloading the next image?

user_14712436 0
Viewed 3556

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?

carousel swiper.js
1 Answers

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
  },
});
user_136210460
Related