React-id-swiper: loadOnTransitionStart doesn't work

[joe-f]

const params = { pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true, dynamicBullets: true }, slidesPerView: 1, loop: true, preloadImages: false, lazy: { enabled: true, loadOnTransitionStart: true } };

We need the image to start loading as soon as the swipe begins rather than waiting for the blur event. This property doesn't seem to be working however! Still only lazy loads on blur.

[joe-f]

@kidjp85 Any ideas on this issue?

[kidjp85]

Hi @joe-f , sorry for my late reply. It should not have enabled property in lazy params due to API. Only lazy: { loadOnTransitionStart: true } is enough

[joe-f]

Hey @kidjp85 thanks for the update!

I've tried this, and it does lazy load but it has the exact same effect as normal lazy loading. e.g. The image is loaded on release of the swipe

This should load the image as soon as the swipe begins, but it isn't.

[kidjp85]

Hi @joe-f , how do u check if it has the exact same effect as normal lazy loading ? Is it still showing loading spinner ? Cause when I tested in my local with demo page, I couldn't see loading spinner when I went to next slide.

[joe-f]

Hey @kidjp85,

No loading spinner, but this property should load the next image as soon as you start swiping, even before you release the swipe, but it isn't

Here is what is happening:

[joe-f]

@kidjp85 Did you get a chance to look at the above animation, showing the problem?

[kidjp85]

Hi @joe-f , sorry for my late reply cause I am so busy recently. I found one solution for u.

params = {
    lazy: {
       loadPrevNext: true,
       loadPrevNextAmount: 1,  // number of slides u wanna preload on transition start
       loadOnTransitionStart: true
   }
}

[joe-f]

@kidjp85 Perfect that fixed it, thank you!

[AndreasCag]

Actually, it doesn't. @kidjp85 's solution just do this:

• when you start transition to next slide, swiper loads content on left and right sides of this slide, instead of loading content on left and right sides only if transition is ended.

But issue question relates to another possibility: lazy load slide image only when user tries to swipe to this slide.