偵聽圖片 onload 事件

index.html

<div id="app">
  <h2 v-if="loading">Loading</h2>
  <h2 v-else>complete</h2>
  <img
    :class="imgClass"
    @load="loading = false"
    src="https://picsum.photos/500/300" alt="">
</div>

script.js

new Vue({
  el:"#app",
  data:{
    loading: true,
  },
  computed:{
    imgClass(){
      if(this.loading){
        return 'img hide';
      }else{
        return 'img';
      }
    },
  },
})

style.scss

.img.hide{
  opacity: 0;
}

.img{
  transition: opacity 1.5s;
}