Vue进阶（四十四）：vue 图片加载完成事件

需求：当页面需要处理图片渲染完毕的时候，对图片进行加水印操作。
想到了image的onload事件，当图片加载完成之后再处理图片。
原生js

<img onload="get(this)"  src="..."  style="display: none"/>
<script type="text/javascript">
function get(ts){ ts.style.display = 'block'
}
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

vue

div(:class="$style.main", v-show="show") img(:src="datas.image", @load="loadImage")

data() { return { show: false, }
},
methods:{ loadImage(){ let _this = this _this.show = true }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

在图片加载完成之后再处理图片，就可以解决元素无法找到的问题，问题解决。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/89152825