Swiper: lazyLoadingInPrevNextAmount not preloading images with lazy loading

Created on 9 Feb 2016 · 9Comments · Source: nolimits4web/swiper

I've been trying to get the recently implemented lazyLoadingInPrevNextAmount option to work but so far it seems to have no effect.

I have tested this with the latest 3.3.1 version of Swiper and it still doesn't work. I have set up an example here: http://codepen.io/anon/pen/gPQqGQ

If I open the Chrome inspector and watch the network tab, I can see only a couple of images are downloaded (ie. the ones that are in view). Then it just waits and no more images download. When I scroll, images are downloaded as they come into view but this is too late - I would like to have it always loading several images ahead to avoid the noticeable delay each time a new image appears.

Here is my configuration for reference:

var swiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                slidesPerView: 'auto',
                spaceBetween: 10,
                mousewheelControl: true,
                mousewheelSensitivity: 1,
                freeMode: true,
                preloadImages: false,
                lazyLoading: true,
                watchSlidesVisibility: true,
                lazyLoadingInPrevNext: true,
                lazyLoadingInPrevNextAmount: 5
            });

Is this a bug or am I doing something wrong? I saw a mention in other issue that someone else was having the same problem so I don't think it's just me.

Any help would be appreciated! This script is amazing and it's so close to being perfect for what I need. Many thanks!

Source

hybridvision

👍3

Most helpful comment

Hi Vladimir,

I was wondering if there is any update on this? I imagine you've got a lot on your todo list so no pressure, just hoping to get an idea of a possible timeframe since I'd like to use Swiper in a project that is launching soon.

Thanks!

hybridvision on 3 Mar 2016

👍2

All 9 comments

At the moment it is not supported for slidesPerView: 'auto'. Will fix it

nolimits4web on 10 Feb 2016

Ah I see, I hadn't realised that... Thanks Vladimir, really appreciate your work!

hybridvision on 10 Feb 2016

Hi Vladimir,

Thanks!

hybridvision on 3 Mar 2016

👍2

MuhammadAmmad on 9 May 2016

If anyone is looking for an alternative until this is implemented, check out the excellent Lazysizes plugin: http://afarkas.github.io/lazysizes/

hybridvision on 9 May 2016

👍1

+1. Need a fix for the slidesPerView: 'auto' and "lazyLoadingInPrevNextAmount" parameter. Thank you.

a-zharkov on 1 Oct 2016

Hello. lazyLoadingInPrevNextAmount have fixed? I am very need this option =)

sun-ks on 27 Oct 2016

The latest Swiper - I can't get it working correctly. Next and Prev images are not loaded despite different settings configuration.

~~~
var swiper = new Swiper('.swiper-container', {
slidesPerView: 7,
spaceBetween: 15,
loop: true,
loadPrevNext: true,
lazy: true,
// loadPrevNextAmount: 10, //Seems not to be working!
watchSlidesVisibility: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
// when window width is <= 320px
320: {
slidesPerView: 2,
spaceBetween: 10
},
// when window width is <= 480px
480: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 4,
spaceBetween: 30
}
}
});