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

Question

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>

Answer 1

This is similar to Alphesh's solution but I think it's a little bit easier to read. The idea is to set up a simple queueing system with three properties:

1. imagesToLoad - The list of images/videos you need to load
2. loadingImage - The image that is currently loading
3. loadedImages - The images that have already loaded

You'll also have a simple method called queueNextImage which should be called by the mounted hook (to start the first image loading) and then again when an image is finished loading that looks like this:

queueNextImage() {
  if(this.loadingImage !== null) {
    this.loadedImages.push(this.loadingImage)
  }
  this.loadingImage = this.imagesToLoad.shift()
}

When you start imagesToLoad will be populated with all the image URLs you'd like to load and loadedImages will be an empty array.

The template will iterate through the loadedImages rendering them in a regular loop and will have a single img element having the src attribute bound to the value of loadingImage and which fires the queueNextImage from the onLoad event of the image.

Full example:

<template>
  <div>
    <p>
      Images to load: <span>{{imagesToLoad.length}}</span>
      Loading image: <span>{{loadingImage}}</span>
      Images Loaded: <span>{{loadedImages.length}}</span>
    </p>
    <img v-for="item in loadedImages" v-bind:key="item" v-bind:src="item" />
    <img v-on:load="queueNextImage" v-bind:src="loadingImage" />
  </div>
</template>

<script>
export default {
  mounted: function() {
    this.queueNextImage();
  },
  methods: {
    queueNextImage() {
      if(this.loadingImage !== null) {
        this.loadedImages.push(this.loadingImage)
      }
      this.loadingImage = this.imagesToLoad.shift()
    },
  },
  data: () => ({
    loadedImages: [],
    loadingImage: null,
    imagesToLoad: Array.from({length:200},(v,k)=>`https://via.placeholder.com/${k+850}`),
  }),
};
</script>

Try it on CodeSandbox.