vue.js - 等待加载多个图像

Question

我有多个图像要加载，我把它们放在一个数组中。

在循环中，我在加载图像时增加一个计数器。

当这个计数器等于我的图像的数组长度时，我想删除加载指示器。

我不知道为什么，那不起作用。

new Vue({
  el: "#app",
  created() {
    let imageLoaded = 0;
    for (const imageSrc of this.imagesToPreload) {
      if (imageLoaded === this.imagesToPreload.length) {
        console.log("Done !");
        this.loading = false;
      }

      const img = new Image();
      img.src = imageSrc;

      img.onload = () => {
        imageLoaded++;
        console.log(imageLoaded);
      };
    }
  },
  data() {
    return {
      isLoading: true,
      imagesToPreload: [
        "https://placeimg.com/1280/800/any",
        "https://placeimg.com/1280/800/any",
        "https://placeimg.com/1280/800/any"
      ]
    };
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
	<div v-if="isLoading">Loading...</div>
</div>

Answer 1

您的代码将检查图像是否已加载 立即设置图像源后。它不会等到任何图像实际加载。
在我看来，最好的方法是使用 promise :

new Vue({
  el: "#app",
  created() {
    const images = this.imagesToPreload.map(imageSrc => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = imageSrc;
        img.onload = resolve;
        img.onerror = reject;
      });
    });

    Promise.all(images).then(() => { 
      console.log("Images loaded!");
      this.isLoading = false;
    }).catch(error => {
      console.error("Some image(s) failed loading!");
      console.error(error.message)
    });
  },
  data() {
    return {
      isLoading: true,
      imagesToPreload: [
        "https://placeimg.com/1280/800/any",
        "https://placeimg.com/1280/800/any",
        "https://placeimg.com/1280/800/any"
      ]
    };
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <div v-if="isLoading">Loading...</div>
</div>

或者，尝试在 onload 中检查每个图像的回调。

  created() {
    let imageLoaded = 0;
    for (const imageSrc of this.imagesToPreload) {    
      const img = new Image();
      img.src = imageSrc;

      img.onload = () => {
        imageLoaded++;

        if (imageLoaded === this.imagesToPreload.length) {
          console.log("Done !");
          this.isLoading = false;
        }

        console.log(imageLoaded);
      };
    }
  }