在 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. 使用存儲在 asrc 屬性中的圖像 URL 創建一個圖像數據數組（您可以將其命名為任何名稱）。
2. 使用 v-for 指令從列表中渲染每個圖像。
3. 將圖像 src 設置為 image.src 而不是 asrc

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

4. 還設置一個圖像加載事件來調用下一個圖像的加載

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

5. 每當調用圖像加載器時，將 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 2

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

將您的代碼包裝在此組件中，您的 html 將根據可見性加載。

Answer 3

這類似於 Alphesh 的解決方案，但我認為它更容易閱讀。 這個想法是建立一個具有三個屬性的簡單排隊系統：

1. imagesToLoad - 您需要加載的圖像/視頻列表
2. loadingImage - 當前正在加載的圖片
3. loadedImages - 已經加載的圖片

您還將有一個名為queueNextImage的簡單方法，該方法應由mounted的鈎子調用（以開始第一個圖像加載），然后在圖像完成加載時再次調用，如下所示：

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

當您啟動imagesToLoad時，將填充您要加載的所有圖像 URL，並且loadedImages將是一個空數組。

模板將遍歷loadedImages的圖像，在常規循環中渲染它們，並將有一個單一的img元素，其src屬性綁定到loadingImage的值，並從圖像的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>

在 CodeSandbox 上試一試。

Answer 4

您需要使用圖像預加載。 如果您使用 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 中有一些圖像預加載示例Vuetify carousel image loading

或者你可以使用這個組件來預加載https://github.com/vuetifyjs/vuetify-loader

Answer 5

據我了解，您想要按索引的升序一張一張地加載圖像。

您可以嘗試一種方法，例如：

• 創建一個async方法並await循環加載圖像。

偽代碼示例：

1. 先替換vue模板中的代碼

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

2. 然后一張一張地異步加載圖片。

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