問(wèn)題描述

這是一個(gè)子組件 實(shí)現(xiàn)的功能是輪播圖

我在mounted組件里延遲20毫秒去初始化某些動(dòng)作但初始化動(dòng)作的前提要求下是第一張圖片已經(jīng)加載完成了。
現(xiàn)在的問(wèn)題是圖片還沒(méi)加載完成就執(zhí)行了setTimeout

相關(guān)代碼

這是一個(gè)子組件

<template>
  <div class="slider" ref="slider">
      <div class="slider-group" ref="sliderGroup">
          <div class="slider-item" v-for="(item,index) in list" :key="index" >
              <a @click.stop="item.onClick">
                  <img :src="item.img" :alt="item.img" :style="`width:${width}`" ref="sliderItemImg">
              </a>
          </div>
      </div>
     <div class="dots" v-if="this.dots">
          <span :class="`dot ${index === currentPageIndex ? 'active' :'' }`" v-for="(item,index) in list.length" :key="index"></span>
      </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  props: {
    // 圖片寬度
    width: {
      type: String,
      default: "100%"
    },
    // 數(shù)據(jù)列表
    list: {
      type: Array,
      default: []
    },
    // 循環(huán)輪播
    loop: {
      type: Boolean,
      default: true
    },
    // 是否自動(dòng)輪播
    autoPlay: {
      type: Boolean,
      default: true
    },
    // 輪播間隔
    speed: {
      type: Number,
      default: 3000
    },
    // 是否需要 dots
    dots: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentPageIndex: 0,
      _slider: null,
      _timer: null
    };
  },
  mounted() {
    const _this = this;
    _this.tmpTimer = setTimeout(() => {
         console.log()
    }, 20);
  },

嘗試過(guò)的解決方案:

1、加大setTimeout時(shí)間(不夠智能)
2、<img :src="item.img" :alt="item.img" :style="width:${width}" ref="sliderItemImg" @onload="function"> 給img屬性加上onload事件 無(wú)效沒(méi)有執(zhí)行綁定的function

期待結(jié)果

因?yàn)閘ist 是個(gè)數(shù)組里面存儲(chǔ)的可能是多張圖 ， 如何能夠在第一張圖加載完成之后再去初始化動(dòng)作