vue中如何监听图片是否加载完成

Question

问题描述

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

我在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 是个数组里面存储的可能是多张图 ， 如何能够在第一张图加载完成之后再去初始化动作

Answer 1

可以考虑用指令啊，在inserted的时候去重新新建一个img，让其src等于该img的src,再监听新的img的onload事件

directives : {
   loadimg (el,binding,vnode){
      //el就是img
      let src = el.src
      let newImg = new Image()
      newImg.src = src
      newImg.onload = function(){
         //doSomething
         
      }
   }
}

Answer 2

vue的img标签里直接有一个load事件啊 ，@load就可以了

Answer 3

如果只是确定第一张图片加载完成的话，可以使用Image对象去做，下面是伪代码

let firstImg = new Image();
firstImg.onload = function() {
 // 做初始化动作
}
firstImg.src = list[0].img

Answer 4

'@onload'应该写成'@load'

Answer 5

new Image()的onload方法里面就是加载完成

Answer 6

可以用这个插件 https://github.com/David-Desm...