load
,一旦图片加载完成就会触发该事件。
new Vue({
el: "#app",
data: {
imgsrc: "",
btntext: "Show Image",
isLoaded: false,
isLoading: false
},
methods: {
loaded() {
this.isLoaded = true;
this.isLoading = false;
},
toggleimg: function(){
if (this.imgsrc == "") {
this.isLoaded = false;
this.isLoading = true;
this.imgsrc = "https://images2.alphacoders.com/103/1039991.jpg"
this.btntext = "Hide Image"
}else{
this.imgsrc = ""
this.btntext = "Show Image"
}
}
}
})
.loading {
background: transparent url('https://miro.medium.com/max/882/1*9EBHIOzhE1XfMYoKz1JcsQ.gif') center no-repeat;
height: 400px;
width: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2>Image Loader Spinner</h2>
<button @click="toggleimg">{{ btntext }}</button>
<div v-if="isLoading" class="loading"></div>
<img v-show="isLoaded" :src="imgsrc" width="400" @load="loaded">
</div>
Using new Image()
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"