我正在使用nuxtjs,并且想在加载图像时显示加载微调器。我面临的另一个问题是,在图像加载之前,页面无法完全加载。图像加载时是否可以加载其他组件?
<template>
<div>
<b-carousel
id="showcase"
controls
:interval="4000"
img-width="1024"
img-height="480"
>
<b-carousel-slide v-for="image in images" :key="image.name">
<img
slot="img"
class="d-block img-fluid w-100"
width="1024"
height="480"
:src="require(`~/assets/img/carousel/${image.name}`)"
alt=""
/>
</b-carousel-slide>
</b-carousel>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ name: 'slide_img_0.jpg' },
{ name: 'slide_img_1.jpg' },
{ name: 'slide_img_3.jpg' },
{ name: 'slide_img_4.jpg' },
{ name: 'slide_img_5.jpg' },
{ name: 'slide_img_6.jpg' },
{ name: 'slide_img_7.jpg' },
{ name: 'slide_img_9.jpg' },
]
}
}
}
</script>