Javascript 在Vue.js中加载图像时显示微调器

在以下示例中，我使用Vue.js制作了一个简单的图像微调器加载程序：

https://jsfiddle.net/Tenarius/g2chd796/8/

问题是，特别是对于较大的图像，图像通常会逐块加载。这对用户来说并不好

图片应仅在完全加载时显示。只要图像未完全加载，就应显示微调器

---

如何使其工作？

映像将发出一个事件加载，一旦加载映像，就会触发该事件加载

新Vue{ el:应用程序， 数据：{ imgsrc:， btntext：显示图像， isLoaded:false， 孤岛加载：false }, 方法：{ 装载{ this.isLoaded=true； this.isLoading=false； }, 切换：函数{ 如果this.imgsrc=={ this.isLoaded=false； this.isLoading=true； this.imgsrc=https://images2.alphacoders.com/103/1039991.jpg this.btntext=隐藏图像 }否则{ this.imgsrc= this.btntext=显示图像 } } } } .装货{ 背景：透明url'https://miro.medium.com/max/882/1*9EBHIOzhE1XfMYoKz1JcsQ.gif'中心无重复； 高度：400px； 宽度：400px； } 图像加载器旋转器 {{btntext}} 使用新图像

var myImage = new Image();
myImage.src = 'https://images2.alphacoders.com/103/1039991.jpg';
myImage.onload = () => {
    this.imgsrc = myImage.src
}      
this.imgsrc = 'https://miro.medium.com/max/882/1*9EBHIOzhE1XfMYoKz1JcsQ.gif'
this.btntext = "Hide Image"