實作Vue載入動畫，同時從URL載入圖片

Question

<p>我想在圖片載入時顯示載入動畫，但我不知道如何實現。 <br /><br />雖然沒有加載器，但我進行了調試，控制台上顯示了"true"和"false"，但仍然沒有加載動畫出現。 </p><p><br /></p> <pre class="brush:php;toolbar:false;"><template> <div class="KingOfMountain"> <Spinner v-if="isLoading"/> //// ERROR <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> </範本> <腳本> 從“@/mixins/game”導入遊戲； 從“@/components/Spinner/Spinner”導入 Spinner； //CSS 中一切都很好。有用 導出預設值{ 名稱：“山王”， 數據（） { 返回{ 正在加載：假 } }, 組件：{旋轉器}， 方法： { 選擇LeftFilm() { this.isLoading=true this.redirectToResultKing() // 這是 mixins 中的方法（都很好，它有效） this.isLoading=false }, 選擇RightFilm() { this.isLoading=true this.firstFilm = this.secondFilm; this.redirectToResultKing() // 這是 mixins 中的方法（都很好，它有效） this.isLoading=false } }, } </劇本></pre> <p>如果我喜歡這樣使用，它會顯示載入動畫：</p>

chooseLeftFilm() {
    this.isLoading=true
    this.redirectToResultKing() // 這是 mixins 中的方法（都很好，它有效）
},</pre>
<p>//它將永遠旋轉</p>
<p>幫我，如何更好地製作載入動畫？</p>
<p>我的混入（mixins）：</p>
<pre class="brush:php;toolbar:false;">匯出預設值 {

方法： {
    更新電影（）{
        // 這裡我隨機從 Vuex 中取得 2 張圖像，然後將它們刪除等等...
        this.currentCountKing ;
        this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm)
        this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)]
    },
    重定向到結果王（）{
        if (this.currentCountKing === this.ALL_FILMS.length - 1) {
            this.isEndGameKing = true
        } 別的 {
            this.updateFilm()
        }
    }
},
計算：{
    ...mapGetters(['ALL_FILMS']),
},</pre>
<p>我的 Vuex:</p>
<pre class="brush:php;toolbar:false;">匯出預設值 {
    狀態： {
        電影：[]、
    },
    行動：{
        異步 getFilms({commit}) {
            const data = 等待 fetch(URL);
            const dataResponse = 等待 data.json();
            const 電影=dataResponse.data
            提交（“setData”，電影）
        },
    },
    突變：{
        setData（狀態，電影）{
            state.films = 電影
        },
    },
    吸氣劑：{
        ALL_FILMS（狀態）{
            返回狀態電影
        },
    }
}</pre>
<p><br />></p>

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>