问题描述

这是一个子组件 实现的功能是轮播图

我在mounted组件里延迟20毫秒去初始化某些动作但初始化动作的前提要求下是第一张图片已经加载完成了。
现在的问题是图片还没加载完成就执行了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: []
    },
    // 循环轮播
    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事件 无效没有执行绑定的function

期待结果

因为list 是个数组里面存储的可能是多张图 ， 如何能够在第一张图加载完成之后再去初始化动作