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

在设置了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>


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

试了一下好像又不是这个原因,和屏幕宽度莫名其妙又有关系,把窗口变窄,第一次就刷新不出来,窗口是原始尺寸就刷新的出来

你好,我是有问必答小助手,非常抱歉,本次您提出的有问必答问题,技术专家团超时未为您做出解答


本次提问扣除的有问必答次数,已经为您补发到账户,我们后续会持续优化,扩大我们的服务范围,为您带来更好地服务。