Load Next slide Image in a carousel while on current slide using lozad. (load n+1th slide while on nth slide)

Question

Load Next slide Image in a carousel while on current slide using lozad. (load n+1th slide while on nth slide)

Decay24 opened this issue 2 years ago · 1 comments

I'm currently using lozad in a carousel and it works fine but to improve performance I need the image of the immediate next slide in carousel to load while on current slide.

Tried changing values of root margin but it still loads image once that slide is on viewport.

var observer = lozad('.lozad', {
threshold: 0,
rootMargin: '600px'
})
observer.observe();

As you can see root margin with 600px is working fine vertically but not horizontally.

Images are loading vertically when they are 600px away from viewport but not horizontally in carousel.

In carousel the image is loading only when we move to next slide which will affect the performance.

Do I have to set root property as well? if so what can be the value? Because I tried giving it null, doesn't work.

how can I get the intersection observer to work on x-axis as well.

Am I missing something or Is there any way to modify root margin so that in carousel while I'm on "nth slide, n+1th slide" be loaded for smooth transition in carousel.

@ApoorvSaxena

var observer = lozad('.lozad', { threshold: 0, rootMargin: '600px' }) observer.observe();

var observer = lozad('.lozad', {
threshold: 0,
rootMargin: '600px'
})
observer.observe();