Implementieren Sie die Vue-Ladeanimation und laden Sie gleichzeitig Bilder von der URL

Question

Ich möchte beim Laden des Bildes eine Ladeanimation anzeigen, weiß aber nicht, wie ich das erreichen soll.

Obwohl es keinen Loader gibt, habe ich debuggt und auf der Konsole wurden „true“ und „false“ angezeigt, aber es erschien immer noch keine Ladeanimation.

<template>
    <div class="KingOfMountain">
        <Spinner v-if="isLoading"/> //// FEHLER
        <div v-else class="container">
            <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>
</template>

<script>
Spiel importieren aus „@/mixins/game“;
Spinner aus „@/components/Spinner/Spinner“ importieren; //alles gut in CSS. Es klappt


Standard exportieren {
    Name: „KingOfMountain“,
    Daten() {
        zurückkehren{
            isLoading:false
        }
    },
    Komponenten: {Spinner},
    Methoden: {
        ChooseLeftFilm() {
            this.isLoading=true
            this.redirectToResultKing() // es ist eine Methode in Mixins (alles gut, es funktioniert)
            this.isLoading=false
        },
        ChooseRightFilm() {
            this.isLoading=true
            this.firstFilm = this.secondFilm;
            this.redirectToResultKing() // es ist eine Methode in Mixins (alles gut, es funktioniert)
            this.isLoading=false
        }
    },
}
</script>

chooseLeftFilm() {
    this.isLoading=true
    this.redirectToResultKing() // es ist eine Methode in Mixins (alles gut, es funktioniert)
},

// es wird sich für immer drehen

帮我，如何更好地制作加载动画？

我的混入（mixins）:

export default {

Methoden: {
    updateFilm() {
        // Hier nehme ich zufällig 2 Bilder von Vuex und lösche sie dann usw.
        this.currentCountKing++;
        this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm)
        this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)]
    },
    weitergeleitetToResultKing() {
        if (this.currentCountKing === this.ALL_FILMS.length - 1) {
            this.isEndGameKing = true
        } anders {
            this.updateFilm()
        }
    }
},
berechnet: {
    ...mapGetters(['ALL_FILMS']),
},

我的 Vuex:

export default {
    Zustand: {
        Filme: [],
    },
    Aktionen: {
        asynchrone getFilms({commit}) {
            const data = waiting fetch(URL);
            const dataResponse = wait data.json();
            const filme=dataResponse.data
            commit("setData", Filme)
        },
    },
    Mutationen: {
        setData(state, movies) {
            state.films = Filme
        },
    },
    Getter: {
        ALL_FILMS(Zustand) {
            Geben Sie state.films zurück
        },
    }
}

Answer 1

常见的方法是使用Image对象加载图片，然后使用load事件等待数据加载完成，在加载过程中显示加载动画。然后，您可以设置图片的URL，图片将立即更新：

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>