該賞金過期4天。這個問題的答案有資格獲得 50聲望獎勵。 湯姆想引起更多人對這個問題的關注：
正如我在評論中提到的，我需要在查看之前預加載影像/視頻。基本上我需要一個接一個地加載從 1 到 1000 的每個專案。
我需要為在線幻燈片演示加載大約 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>
uj5u.com熱心網友回復：
您可以使用lazyvuetify 中的組件：https ://vuetifyjs.com/en/components/lazy/
將您的代碼包裝在此組件中，您的 html 將根據可見性加載。
uj5u.com熱心網友回復：
您需要使用影像預加載。如果您使用 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
uj5u.com熱心網友回復：
據我了解，您希望按照索引的升序一張一張地加載影像。
您可以嘗試一種方法，例如：
- 創建一個
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;
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337380.html