Vuetify: [Feature Request] Implement lazy loading for carousel

[smares]

New Functionality

The carousel documentation lists a lazy prop but apparently it doesn't do anything. It would be nice if that prop would make the carousel load only the current image and the next one or two for performance reasons.

Improvements

No more need to give the carousel only chunks of images.

Bugs or Edge Cases it Helps Avoid

With lots of images, the current non-lazy loading makes the carousel trigger lots of image downloads which sometimes makes browsers unresponsive (Edge for example is so busy loading my 324 images that the whole page stalls).

[johnleider]

Are you looking to make v-carousel in its entirety lazy, or the contents of v-carousel-item, or both?

[smares]

The idea is to be able to have a carousel with many images that don't all download when the carousel is mounted. My current workaround is to have many carousel items that all have the src set to a small dummy image and only the current item + the next two or three have the real image set as src. Boosted my initial page loading time a lot. Didn't benchmark what impact it would have to have less divs in the DOM by making the whole carousel lazy, that is, even with 100 carousel items only generate a handful of divs initially and maybe reuse them.

[dohomi]

@smares @johnleider I think here we might should think about a more generic approach of enabling lazy on <img> tags. Currently in my project I make use of https://github.com/aFarkas/lazysizes to make sure that the initial page render speeds up.

[johnleider]

This will be functionality enabled from some updates coming later this year. @KaelWD is already working on the beginning piece, v-img.

[dohomi]

@johnleider great news this will be very useful

[yesworld]

any news?

[johnleider]

Yes, will be a focus for 1.3

[niutech]

The <v-carousel lazy> attribute has been dropped from the API for now.

[johnleider]

This has been added in v1.3 through v-window-item

[apro23]

Hi, how would I implement the v-carousel inside the v-window to make use of lazy loading? I am having difficulty implementing the v-window. Thank you sir

[apro23]

<v-window v-model="window"> <v-window-item lazy> <v-carousel v-for="(slide,i) in slides" :key="i"> <v-carousel-item :src="slide.src"></v-carousel-item> </v-carousel> </v-window-item> </v-window>

Here is my code, I think there is a problem I get an error saying

[jacekkarczmarczyk]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.