在 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>