等待加载多张图像

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

在设置图像源时，似乎代码将检查是否立即加载了所有内容，并且它不会等到加载任何图像后进行检查。

尝试将用于检查是否在加载图像时将所有内容加载到回调中的代码：

new Vue({
  el: "#app",
  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);
      };
    }
  },
  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>