nuka-carousel Enhancement: Lazy loading for images.

Enhancement: Lazy loading for images.

Open abhilashsajeev opened this issue 9 years ago • 13 comments

It would be nice if lazy loading is implemented for images

:+1:

Sep 14 '15 16:09 shouze

shameless advertizing You can use react-lazy to achieve this so the carousel component doesn't need to become more complex than it already is. /shameless advertizing

Sep 29 '15 08:09 Merri

@Merri Unless I'm missing something, react-lazy doesn't seem to help. On my quick test all the images loaded before I started scrolling the gallery, both for a full page width gallery and for smaller galleries

using something like this

<Carousel>
  <Lazy cushion={100}>
    <img src={getUrl('imagesUrl') + this.state.data.images[0]}/>
  </Lazy>
</Carousel>

The use case would be images don't load until the slide is scrolled to (or even better, the slide before)

When I have a lot of galleries on one page, it works in so far as all the slides for a gallery load as soon as it is visible, but images are not loaded for slides that are not yet visible.

Dec 02 '15 16:12 davidowens

@david-owens-akqa Right now it still lacks the feature of finding the proper nearest parent element of true visibility. So the full visible viewport works as a comparison point. This works great for mobile, but if you test on 2560 x 1440 full screen browser and have only a couple of images then yes, all of them get loaded immediately.

I've been a bit on the lazy side in adding features.

Pun intended.

Dec 02 '15 18:12 Merri

Any update on this?

Apr 06 '16 05:04 abhilashsajeev

@Merri React - lazy doesn't seem to help.

Apr 12 '16 12:04 abhilashsajeev

@kenwheeler Any updates?

Apr 15 '16 03:04 abhilashsajeev