<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>
Your 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>
Hot Questions
function_exists()無法判定自訂函數
2024-04-29 11:01:01
google 瀏覽器 手機版顯示的怎麼實現
2024-04-23 00:22:19
子窗口操作父窗口,輸出沒反應
2024-04-19 15:37:47
父視窗沒有輸出
2024-04-18 23:52:34
關於CSS心智圖的課件在哪?
2024-04-16 10:10:18
Hot Tools
vc9-vc14(32+64位元)運行庫合集(連結在下方)
phpStudy安裝所需運行函式庫集合下載
VC9 32位
VC9 32位元 phpstudy整合安裝環境運行庫
php程式設計師工具箱完整版
程式設計師工具箱 v1.0 php整合環境
VC11 32位
VC11 32位元 phpstudy整合安裝環境運行庫
SublimeText3漢化版
中文版,非常好用
熱門話題
抖音等級價目表1-75
20337
7
20337
7
wifi顯示無ip分配
13531
4
13531
4
虛擬手機號碼接收驗證碼
11851
4
11851
4
gmail信箱登陸入口在哪裡
8836
17
8836
17
windows安全中心怎麼關閉
8420
7
8420
7
熱門文章
2025年加密貨幣市場十大趨勢預測:下一個風口在哪裡?
2025-11-07
By DDD
幣圈土狗項目如何識別?避免歸零幣的陷阱與風險預警
2025-11-07
By DDD
解決CSS @media 查詢優先級與規則覆蓋問題的教程
2025-11-07
By DDD
win10字體安裝後在軟件裡找不到怎麼辦_win10字體安裝與識別方法
2025-11-07
By DDD
鐵路12306支付失敗訂單還在嗎_鐵路12306支付失敗訂單處理方法
2025-11-07
By DDD





