Element UI 的carousel组件，第一次加载图片很慢

Question

在设置了internal=“10000”后，第一次进入页面，就需要等待10s才开始显示，用户把鼠标移到指示器上就马上显示了，不是接口返回慢的问题

这个internal还包括了初始的等待时间吗？这样一进去就要空白10s怎么解决啊

我也设置了autoplay为true，也没用

      <el-carousel :autoplay="true"  :interval="50000">
        <el-carousel-item v-for="item in carouselData" :key="item" >
          <div
              :style="{ backgroundImage: `url(${item.bg_image})` }"
              class="carouselContent"
          >
            <!-- 标题和描述 -->
            <div class="topText">
              <p class="carouselDataFirstTitle textColor">{{ item.title }}</p>
              <p class="carouselDataSubTitle textColor">{{ item.sub_title }}</p>
              <p class="carouselDataDes textColor">
                <el-row>
                  <el-col :span="8" class="textColor">
                    {{ item.description }}
                  </el-col>
                </el-row>
              </p>
              <!-- 按钮 -->
              <el-button class="x-btn" style="margin-top:20px" @click="clickCarouselBtn(item.button_link)">
                {{ item.button_content }}
              </el-button>
            </div>
            <!-- 轮播图里面的图片 -->
            <div class="bottomImgContainer">
              <el-row :gutter="gutter">
                <el-col :span="item.sub_banner.length==4?6:8" v-for="jtem in item.sub_banner" :key="jtem">
                  <div class="block" :style="{background:'url('+jtem.image+') no-repeat'}">
                    <!--<img @click="clickCarouselImg(jtem)" :src="jtem.image" alt=""/>-->
                    <p class="textColor">{{jtem.label}}</p>
                  </div>
                  <!--<img @click="clickCarouselImg(jtem)" :src="jtem.image" alt=""/>-->
                </el-col>
              </el-row>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

Answer 1

找到原因了，carousel-item里面写img标签就没问题，我是写了一个div，用动态style写background，就会出现这种情况