Implémentez l'animation de chargement de Vue et chargez les images à partir de l'URL en même temps

Question

Je souhaite afficher une animation de chargement lors du chargement de l'image, mais je ne sais pas comment y parvenir.

Bien qu'il n'y ait pas de chargeur, j'ai débogué et "vrai" et "faux" étaient affichés sur la console, mais aucune animation de chargement n'est toujours apparue.

<template>
    <div class="KingOfMountain">
        <Spinner v-if="isLoading"/> //// ERREUR
        <div v-else class="conteneur">
            <div v-if="!isEndGameKing" class="choices">
                <p id="score">{{ currentCountKing }}/{{ ALL_FILMS.length - 1 }}
                <p/>
                <div class="photos">
                    <div class="first__film">
                        <img :src="firstFilm.Poster" :alt="firstFilm.title" @click="chooseLeftFilm">
                        <p id="title--film">{{ firstFilm.title }}</p>
                    </div>
                    <div class="second__film">
                        <img :src="secondFilm.Poster" :alt="secondFilm.title" @click="chooseRightFilm">
                        <p id="title--film">{{ secondFilm.title }}</p>
                    </div>
                </div>
            </div>
            <div v-else class="winner">
                <p id="winner--title">Победитель</p>
                <img :src="firstFilm.Poster" :alt="firstFilm.title">
            </div>
        </div>
    </div>
</modèle>

<script>
importer le jeu depuis "@/mixins/game" ;
importer Spinner depuis "@/components/Spinner/Spinner" ; //tout va bien en CSS. Ça marche


exporter par défaut {
    nom : "RoiDeMontagne",
    données() {
        retourner{
            isLoading : faux
        }
    },
    composants : {Spinner},
    méthodes : {
        choisirLeftFilm() {
            this.isLoading=true
            this.redirectToResultKing() // c'est une méthode dans les mixins (tout va bien, ça marche)
            this.isLoading=false
        },
        choisirRightFilm() {
            this.isLoading=true
            this.firstFilm = this.secondFilm;
            this.redirectToResultKing() // c'est une méthode dans les mixins (tout va bien, ça marche)
            this.isLoading=false
        }
    },
}
</script>

chooseLeftFilm() {
    this.isLoading=true
    this.redirectToResultKing() // c'est une méthode dans les mixins (tout va bien, ça marche)
},
// il tournera pour toujours
帮我，如何更好地制作加载动画？
我的混入（mixins） :
export par défaut {

méthodes : {
    mise à jourFilm() {
        // Ici, je prends au hasard 2 images de Vuex, puis je les supprime, etc...
        this.currentCountKing++;
        this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm)
        this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)]
    },
    redirectToResultKing() {
        if (this.currentCountKing === this.ALL_FILMS.length - 1) {
            this.isEndGameKing = vrai
        } autre {
            ceci.updateFilm()
        }
    }
},
calculé : {
    ...mapGetters(['TOUS_FILMS']),
},
我的 Vuex :
export par défaut {
    État: {
        films : [],
    },
    Actions: {
        async getFilms({commit}) {
            const data = wait fetch(URL);
            const dataResponse = wait data.json();
            const films=dataResponse.data
            commit("setData", films)
        },
    },
    mutation : {
        setData(état, films) {
            état.films = films
        },
    },
    getteurs : {
        ALL_FILMS(état) {
            état de retour.films
        },
    }
}

            

Answer 1

La méthode courante consiste à utiliser l'objet Image pour charger l'image, puis à utiliser l'événement de chargement pour attendre que les données soient chargées et à afficher l'animation de chargement pendant le processus de chargement. Vous pouvez ensuite définir l'URL de l'image et elle se mettra à jour instantanément :

const imgUrl = 'https://picsum.photos/200?random='
let imgCount = 0

const App = {
  template: `
    <div style="display: flex;">
      <div>
        <button @click="loadImage">Load new image</button>
      </div>
      <div v-if="isLoading">LOADING....</div>
      <img :src="src"/>
    </div>
  `,
  data() {
    return {
      isLoading: false,
      src: null,
    }
  },
  methods: {
    async loadImage() {
      this.src = null
      this.isLoading = true
      const img = new Image()
      img.src = imgUrl + imgCount++
      await new Promise(resolve => img.onload = resolve)
      this.src = img.src
      this.isLoading = false
    }
  },
  created() {
    this.loadImage()
  },
}
Vue.createApp(App).mount('#app')

<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>