Laksanakan animasi pemuatan Vue dan muatkan imej daripada URL pada masa yang sama

Question

Saya ingin menunjukkan animasi pemuatan apabila imej dimuatkan, tetapi saya tidak tahu bagaimana untuk mencapainya.

Walaupun tiada pemuat, saya nyahpepijat dan "true" dan "false" telah dipaparkan pada konsol, tetapi masih tiada animasi pemuatan muncul.

<template>
    <div class="KingOfMountain">
        <Spinner v-if="isLoading"/> //// RALAT
        <div v-else class="container">
            <div v-if="!isEndGameKing" class="choices">
                <p id="skor">{{ 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--filem">{{ firstFilm.title }}</p>
                    </div>
                    <div class="second__filem">
                        <img :src="secondFilm.Poster" :alt="secondFilm.title" @click="chooseRightFilm">
                        <p id="title--filem">{{ 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>

<skrip>
import permainan daripada "@/mixins/game";
import Spinner daripada "@/components/Spinner/Spinner"; //semua baik dalam css . ianya berfungsi


eksport lalai {
    nama: "KingOfMountain",
    data() {
        kembali{
            isLoading:false
        }
    },
    komponen: {Spinner},
    kaedah: {
        pilihLeftFilm() {
            this.isLoading=true
            this.redirectToResultKing() // ia adalah kaedah dalam mixin (semua Baik, ia berfungsi)
            this.isLoading=false
        },
        chooseRightFilm() {
            this.isLoading=true
            this.firstFilm = this.secondFilm;
            this.redirectToResultKing() // ia adalah kaedah dalam mixin (semua Baik, ia berfungsi)
            this.isLoading=false
        }
    },
}
</script>

如果我像这样使用，它会显示加载动画：

chooseLeftFilm() {
    this.isLoading=true
    this.redirectToResultKing() // ia adalah kaedah dalam mixin (semua Baik, ia berfungsi)
},

// ia akan berputar selama-lamanya

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

我的混入（campuran）:

eksport lalai {

kaedah: {
    kemas kiniFilem() {
        // Di sini saya mengambil 2 imej secara rawak daripada Vuex dan kemudiannya padam dan sebagainya...
        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 = benar
        } lain {
            this.updateFilm()
        }
    }
},
dikira: {
    ...mapGetters(['SEMUA_FILEM']),
},

我的 Vuex:

eksport lalai {
    nyatakan: {
        filem: [],
    },
    tindakan: {
        async getFilms({commit}) {
            data const = tunggu pengambilan(URL);
            const dataResponse = menunggu data.json();
            const films=dataResponse.data
            commit("setData", filem)
        },
    },
    mutasi: {
        setData(keadaan, filem) {
            negeri.filem = filem
        },
    },
    pengambil: {
        SEMUA_FILEM(negeri) {
            negeri balik.filem
        },
    }
}

Answer 1

Kaedah biasa ialah menggunakan objek Imej untuk memuatkan imej, kemudian gunakan acara pemuatan untuk menunggu data dimuatkan, dan memaparkan animasi pemuatan semasa proses pemuatan. Anda kemudian boleh menetapkan URL imej dan ia akan dikemas kini serta-merta:

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>