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

Question

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

Vue.js Vuetify.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

解决方案:

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

步骤(5):

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

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

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

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

1. 每当调用图像加载器时，将 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>