在 Vue JS 中完成加载之前的项目后加载每个项目

Question

我需要为在线幻灯片演示加载大约 1000 张静态图像、.gif 和视频。目前所有项目都在一次加载，观众需要等待才能看到第一个项目。前一个项目加载完成后如何加载每个项目？

Vue.jsVuetify.js代码：

<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

您可以使用 vuetify 中的 lazy 组件：https://vuetifyjs.com/en/components/lazy/

将您的代码包装在此组件中，您的 html 将根据可见性加载。

Answer 2

您需要使用图片预加载。如果您使用 Nuxt.js，您可以在构建时加载数据并显示所有资产。图片预加载： https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

您可以在惰性模式下渲染图像 https://css-tricks.com/lazy-loading-images-with-vue-js-directives-and-intersection-observer/

Vuetify 中有一些图片预加载的例子

或者您可以使用此组件进行预加载 https://github.com/vuetifyjs/vuetify-loader

Answer 3

据我了解，您想要按照索引的升序一张一张地加载图像。

您可以尝试以下一种方法：

创建 async 方法和 await 循环加载图像。

伪代码示例:

首先替换vue模板中的代码

<v-img
    max-width="100vh"
    :src="imgCollection[index]"
></v-img>

然后一张一张异步加载图片。

    async function loadImages() {
        imagesList.forEach((img, index) => {
            var data = await getImageData(img.url);
            
            // update the data into your array
            imgCollection[index] = data;
        });
    }

Answer 4

解法：

使用图像列表，您需要仅在加载上一个图像时才在每个图像上动态设置 src 属性

步骤 (5):

创建一个图像数据数组，图像 URL 存储在 asrc 属性中（您可以任意命名）。
使用 v-for 指令渲染列表中的每个图像。
将图像 src 设置为 image.src 而不是 asrc

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

同时设置图片加载事件调用下一张图片的加载

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

每当调用图像加载器时，将 src 属性添加到图像。这将开始加载图像。

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>

Answer 5

这与 Alphesh 的解决方案类似，但我认为它更易于阅读。这个想法是建立一个具有三个属性的简单排队系统：

imagesToLoad - 您需要加载的images/videos列表
loadingImage - 当前正在加载的图片
loadedImages - 已经加载的图片

您还将有一个名为 queueNextImage 的简单方法，该方法应由 mounted 挂钩调用（以开始第一个图像加载），然后在图像完成加载时再次调用像这样：

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

当您开始时，imagesToLoad 将填充您要加载的所有图像 URL，loadedImages 将是一个空数组。

模板将遍历 loadedImages 在常规循环中呈现它们，并且将有一个 img 元素，其 src 属性绑定到 [=19= 的值] 并从图像的 onLoad 事件中触发 queueNextImage。

完整示例：

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

在 Vue JS 中完成加载之前的项目后加载每个项目

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

javascript

performance

preload

vue.js

vuetify.js