Solución:

Al usar una lista de imágenes, debe establecer dinámicamente la propiedad src en cada imagen solo cuando se carga la imagen anterior

Pasos (5):

1. Cree una matriz de datos de imagen con la URL de la imagen almacenada en la propiedad asrc (puede nombrarla como quiera).
2. Renderice cada imagen de la lista usando la directiva v-for.
3. Establezca image src en image.src en lugar de asrc

 <img v-for="(image,index) in group" :key="index" :src="image.src"

4. También configure un evento de carga de imagen para llamar a la carga de la siguiente imagen

 <img v-for="(image,index) in group" :key="index" :src="image.src" @load="loadNextimage(index)"/>

5. Siempre que se llame al cargador de imágenes, agregue la propiedad src a la imagen. Esto comenzará a cargar la imagen.

 loadNextimage(currentIndex){ let nextIndex = currentIndex+1 if( nextIndex < this.group.length){ let img = this.group[nextIndex] img.src = img.asrc delete img.asrc Vue.set(this.group, nextIndex, img) } } 

 new Vue({ el: '#app', data(){ return { group: [ { id: 1, title: '', asrc: 'https://source.unsplash.com/collection/190727/120x120'}, { id: 2, title: '', asrc: 'https://source.unsplash.com/collection/8961198/120x120'}, { id: 3, title: '', asrc: 'https://source.unsplash.com/collection/190723/120x120'}, { id: 4, title: '', asrc: 'https://source.unsplash.com/collection/KizanWcExgU/120x120'} ] } }, mounted(){ this.loadNextimage(-1) }, methods:{ loadNextimage(currentIndex){ let nextIndex = currentIndex+1 if(nextIndex<this.group.length){ let img = this.group[nextIndex] img.src = img.asrc delete img.asrc Vue.set(this.group,nextIndex,img) } } } });

 img { height: 120px; width:120px; } img:not([src]){ background: url(https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg); background-size:cover; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <img v-for="(image,index) in group" :key="index" :src="image.src" @load="loadNextimage(index)" > </div>

Puede usar el componente lazy de vuetify: https://vuetifyjs.com/en/components/lazy/

Envuelva su código dentro de este componente y su html se cargará en función de la visibilidad.

Esto es similar a la solución de Alphesh pero creo que es un poco más fácil de leer. La idea es configurar un sistema de cola simple con tres propiedades:

1. imagesToLoad - La lista de imágenes/videos que necesitas cargar
2. loadingImage : la imagen que se está cargando actualmente
3. loadingImages - Las imágenes que ya se han cargado

También tendrá un método simple llamado queueNextImage que debe ser llamado por el enlace mounted (para iniciar la carga de la primera imagen) y luego nuevamente cuando una imagen termina de cargarse que se ve así:

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

Cuando inicie, imagesToLoad se completará con todas las URL de imágenes que desea cargar y las loadedImages serán una matriz vacía.

La plantilla loadedImages a través de las imágenes cargadas, representándolas en un bucle regular y tendrá un único elemento img con el atributo src vinculado al valor de loadingImage y que activa la queueNextImage desde el evento onLoad de la imagen.

Ejemplo completo:

 <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>

Pruébalo en CodeSandbox .