vue中如何監(jiān)聽圖片是否加載完成

問題描述

這是一個子組件 實現的功能是輪播圖

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

相關代碼

這是一個子組件

<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%"
    },
    // 數據列表
    list: {
      type: Array,
      default: []
    },
    // 循環(huán)輪播
    loop: {
      type: Boolean,
      default: true
    },
    // 是否自動輪播
    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);
  },

嘗試過的解決方案:

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

期待結果

因為list 是個數組里面存儲的可能是多張圖 ， 如何能夠在第一張圖加載完成之后再去初始化動作