Vue JS下如何实现资源依次加载，前一项加载完成后再加载下一项

核心思路 #

把所有资源按需要的加载顺序排成队列，仅给队列中已完成加载位置之前的资源赋值真实资源地址，利用Vuetify v-img 组件的加载完成事件触发队列指针后移，自动触发下一个资源的加载。

代码修改 #

脚本部分 #

给页面新增队列控制相关变量和方法，原有逻辑无需改动：

export default {
  data() {
    return {
      // 原有其他变量保持不变
      loadedIndex: 0, // 已完成加载的资源队列下标
      // 1px透明占位图，也可替换为自定义loading占位图地址
      placeholderImg: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    }
  },
  computed: {
    // 把原二维的group数组拍平为一维资源队列，顺序和页面渲染顺序一致
    flattenResources() {
      return this.group.flat()
    }
  },
  methods: {
    // 原有img方法保留不变
    img(objkt) {
      // 你原有的获取资源地址的逻辑
    },
    // 资源加载完成回调，控制队列指针后移
    handleResourceLoad() {
      if (this.loadedIndex < this.flattenResources.length - 1) {
        this.loadedIndex++
      }
    },
    // 动态获取资源地址，未到加载顺序的返回占位图
    getResourceSrc(objkt) {
      const currentResIndex = this.flattenResources.findIndex(item => item.id === objkt.id)
      return currentResIndex <= this.loadedIndex ? this.img(objkt) : this.placeholderImg
    }
  }
}

模板部分 #

修改原v-img的src绑定逻辑，新增加载事件监听：

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

优化建议 #

• 如果包含视频资源，把v-img替换为视频标签后，将@load事件替换为@loadeddata即可复用相同逻辑。
• 如果是滑动播放的幻灯片，可将loadedIndex初始值设置为当前正在播放的幻灯片下标，优先加载观众当前可见的内容，之后再往前后加载，体验更好。
• 资源量较大时可在拍平数组时提前给每个资源绑定_seq序号属性，避免每次findIndex遍历带来的性能损耗。

内容的提问来源于stack exchange，提问作者Tom