我需要为在线幻灯片演示加载大约 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>
最佳答案
解决方案:
使用图像列表,您需要仅在加载上一张图像时动态设置每张图像的 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>
关于javascript - 在 Vue JS 中完成加载之前的项目后加载每个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69657790/