实现Vue加载动画，同时从URL加载图片
P粉021854777
2023-08-03 18:04:16
<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>
</template>
<script>
import game from "@/mixins/game";
import Spinner from "@/components/Spinner/Spinner"; //all good in css . it works
export default {
name: "KingOfMountain",
data() {
return{
isLoading:false
}
},
components: {Spinner},
methods: {
chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // it is method in mixins (all Good, it works)
this.isLoading=false
},
chooseRightFilm() {
this.isLoading=true
this.firstFilm = this.secondFilm;
this.redirectToResultKing() // it is method in mixins (all Good, it works)
this.isLoading=false
}
},
}
</script></pre>
<p>如果我像这样使用，它会显示加载动画：</p>
<pre class="brush:php;toolbar:false;">chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // it is method in mixins (all Good, it works)
},</pre>
<p>// it will spinner forever</p>
<p>帮我，如何更好地制作加载动画？</p>
<p>我的混入（mixins）:</p>
<pre class="brush:php;toolbar:false;">export default {
methods: {
updateFilm() {
// Here i random take 2 images from Vuex and then them delete and 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 = true
} else {
this.updateFilm()
}
}
},
computed: {
...mapGetters(['ALL_FILMS']),
},</pre>
<p>我的 Vuex:</p>
<pre class="brush:php;toolbar:false;">export default {
state: {
films: [],
},
actions: {
async getFilms({commit}) {
const data = await fetch(URL);
const dataResponse = await data.json();
const films=dataResponse.data
commit("setData", films)
},
},
mutations: {
setData(state, films) {
state.films = films
},
},
getters: {
ALL_FILMS(state) {
return state.films
},
}
}</pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
常见的方法是使用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')