vue实现loading效果

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

通过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效果一结束 大图片立马加载出来

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

这么写实现不了，因为在 mounted 生命周期中，只是把内存中的虚拟dom 放到了页面中，也就是在这个过程可以获取到dom元素，此时你把loading 干掉，但是你是一个img标签，它会请求网络图片，由于你图片太大，肯定是耗时的，所以你才会看到loading消失，但是图片还在加载，
我们出于对性能的考虑，就不应该使用特别大的图，最好用size 比较小的图片，一张图片，最好不要超过100kb
所以可以可以减小图片的大小，相对来说是最简单的实现方式