2

I'm using lozad.js which internally uses intersection observer for lazy loading images. I have a carousel where I need the images on next slide which are not on viewport yet to be loaded to better the performance of the website.

Basically load n+1th slide image while on nth slide.

if ($(".lozad").length) {
        var observer = lozad('.lozad', {
            threshold: 0,
            rootMargin: '400px 0px'
        })
        
        observer.observe();
    }

currently i'm using above code, all the pictures in website are loading as they approach viewport, 400px away vertically.

But horizontally, In a carousel it loads only the slide comes in contact with the viewport.

Event when I give root margin of 400px on all sides,

rootMargin: '400px'

it works fine for all other components vertically(loads images 400px away from viewport) but in carousel it still loads the image when the slide comes in contact with viewport (not 400px away).

There is a similar question in link below

Intersection Observer rootMargin not working as expected on x-axis

the answer says to 'specify the root element to be a direct ancestor of the target.'

But what value can I set for root while using it in website using lozad for all the images inside it.

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.

Tried changing rootMargin and root values but it doesn't work as expected.

decay24
  • 21
  • 1

0 Answers0