Load each item after the one before is finished loading in Vue JS-CodePudding

I need to load around 1000 static images, .gifs, and videos for an online slideshow presentation. Currently all items are loading at once and viewers need to wait to see the first item. How to load each item after the one before is finished loading?

Vue.js Vuetify.js code:

<v-row v-for="(objkts, index) in group" :key="index">
   <v-col v-for="objkt in objkts" :key="objkt.id">
      <v-card :key="index" width="100vh">
         <v-img
            max-width="100vh"
            :src="img(objkt)"
            ></v-img>
      </v-card>
   </v-col>
</v-row>

CodePudding user response：

You can use lazy component from vuetify: https://vuetifyjs.com/en/components/lazy/

Wrap your code inside this component and your html will be loaded based on visibility.

CodePudding user response：

You need to use image preloading. If you use Nuxt.js you can load data in build time and show all assets. Image preloading: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

You can render images in lazy mode https://css-tricks.com/lazy-loading-images-with-vue-js-directives-and-intersection-observer/

There is some example for image preloading in Vuetify Vuetify carousel image loading

Or you can use this component for preloading https://github.com/vuetifyjs/vuetify-loader