vue实现loading效果

Question

问题遇到的现象和发生背景

通过el-image和require函数来加载图片，由于加载的图片很大 所以想在加载svg的过程总添加一个loading动画的效果 ，但是按我下面的方法 这个loading效果很快的闪过去了 然后又慢慢的记载出那个比较大的图片

用代码块功能插入代码，请勿粘贴截图

template中是这样的

<div>
  <transition name="fade">
    <loading v-if="isLoading"></loading>
  </transition>
  <el-image  :src="defaultImg" style="width: 1260px" ></el-image>
</div>

import Loading from '@/components/index'
export default {
  name: "overview",
  components:{ Loading  },
  data(){
    return{
      defaultImg:require(`@/assets/overview/`+this.$route.query.id+'.svg'),
      isLoading:true
    }
  },
  mounted() {
    this.loading()
  },
  methods:{
    loading(){
      this.isLoading=false;
    }
  }
}

我想要达到的结果

就是loading效果一结束 大图片立马加载出来

Answer 1

给el-image绑定一个load事件，里边让isLoading变为false图片加载完会自动触发。没事多看看文档，文档下边方法属性什么的写的很详细的