加载微调器,直到图像加载到组件中

时间:2019-04-16 06:30:18

标签: vue.js vuejs2 vue-component nuxt.js

我正在使用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>

0 个答案:

没有答案