在 Vue.js 中加載圖像時顯示微調器

Question

在以下示例中，我使用Vue.js制作了一個簡單的圖像微調器加載器：

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

問題是，尤其是對於較大的圖像，圖像通常會一塊一塊地加載。 這對用戶來說並不好。

---

圖片應僅在完全加載時顯示。 只要圖像未完全加載，就應該顯示微調器。

我該怎么做才能讓它發揮作用？

Answer 1

圖像將發出一個事件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>

Answer 2

使用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"

工作演示