problem description
this is a subcomponent that implements the function of rotation
I delayed initializing some actions by 20 milliseconds in the mounted component, but the prerequisite for initializing the actions is that the first image has been loaded.
the problem now is that the setTimeout was executed before the picture was loaded.
related codes
this is a subcomponent
<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);
},
tried solutions:
1. Increase setTimeout time (not smart enough)
2,
expect results
because list is an array, there may be multiple images stored in it, so how to initialize the action after the first picture has been loaded