实现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>