Attendre le chargement de plusieurs images

Question

J'ai plusieurs images à charger, et je les mets dans un tableau.

Dans une boucle, j'incrémente un compteur lorsqu'une image est chargée.

Lorsque ce compteur est égal à la longueur du tableau de mes images, je veux supprimer l'indicateur de chargement.

Je ne sais pas pourquoi, ça ne marche pas.

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

Votre code vérifiera si les images sont chargées immédiatement après avoir défini les sources de l'image. Il n'attendra pas qu'une des images soit effectivement chargée.

À mon avis, le meilleur moyen serait d'utiliser des promesses :

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>

Ou bien, essayez de faire un chèque dans le onload callback pour chaque image.

  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);
      };
    }
  }