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

Question

In the following example I made a simple image spinner loader with Vue.js :

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

The problem is that, especially with larger images, the image often loads piece by piece . That doesn't look good to the user.

---

The picture should only be displayed when it is fully loaded. As long as the image is not fully loaded, the spinner should be displayed.

What can I do to make it work?

Answer 1

The image will be emitting an event load which will be fired once the image is loaded.

 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>

Answer 2

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"

Working Demo