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

Working Demo

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

Show spinner while loading image in Vue.js

javascript

image

loader

spinner

vue.js