Questions et réponses
Implémentez l'animation de chargement de Vue et chargez les images à partir de l'URL en même temps
Implémentez l'animation de chargement de Vue et chargez les images à partir de l'URL en même temps
Implémentez l'animation de chargement de Vue et chargez les images à partir de l'URL en même temps
P粉021854777 2023-08-03 18:04:16
voir 819
0
<p>Je souhaite afficher une animation de chargement lors du chargement de l'image, mais je ne sais pas comment y parvenir. <br /><br />Bien qu'il n'y ait pas de chargeur, j'ai débogué et "vrai" et "faux" étaient affichés sur la console, mais aucune animation de chargement n'est toujours apparue. </p><p><br /></p>
<pre class="brush:php;toolbar:false;"><template>
<div class="KingOfMountain">
<Spinner v-if="isLoading"/> //// ERREUR
<div v-else class="conteneur">
<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>
</modèle>
<script>
importer le jeu depuis "@/mixins/game" ;
importer Spinner depuis "@/components/Spinner/Spinner" ; //tout va bien en CSS. Ça marche
exporter par défaut {
nom : "RoiDeMontagne",
données() {
retourner{
isLoading : faux
}
},
composants : {Spinner},
méthodes : {
choisirLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // c'est une méthode dans les mixins (tout va bien, ça marche)
this.isLoading=false
},
choisirRightFilm() {
this.isLoading=true
this.firstFilm = this.secondFilm;
this.redirectToResultKing() // c'est une méthode dans les mixins (tout va bien, ça marche)
this.isLoading=false
}
},
}
</script></pre>
<p>
<pre class="brush:php;toolbar:false;">chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // c'est une méthode dans les mixins (tout va bien, ça marche)
},</pré>
<p>// il tournera pour toujours</p>
<p>帮我，如何更好地制作加载动画？</p>
<p>我的混入（mixins） :</p>
<pre class="brush:php;toolbar:false;">export par défaut {
méthodes : {
mise à jourFilm() {
// Ici, je prends au hasard 2 images de Vuex, puis je les supprime, 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 = vrai
} autre {
ceci.updateFilm()
}
}
},
calculé : {
...mapGetters(['TOUS_FILMS']),
},</pré>
<p>我的 Vuex :</p>
<pre class="brush:php;toolbar:false;">export par défaut {
État: {
films : [],
},
Actions: {
async getFilms({commit}) {
const data = wait fetch(URL);
const dataResponse = wait data.json();
const films=dataResponse.data
commit("setData", films)
},
},
mutation : {
setData(état, films) {
état.films = films
},
},
getteurs : {
ALL_FILMS(état) {
état de retour.films
},
}
}</pré>
<p><br /></p>
Your Answer
1 réponse
0
La méthode courante consiste à utiliser l'objet Image pour charger l'image, puis à utiliser l'événement de chargement pour attendre que les données soient chargées et à afficher l'animation de chargement pendant le processus de chargement. Vous pouvez ensuite définir l'URL de l'image et elle se mettra à jour instantanément :
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>
2023-08-04 13:43:52
Outils chauds Tags
Hot Questions
function_exists() ne peut pas déterminer la fonction personnalisée
2024-04-29 11:01:01
Comment afficher la version mobile de Google Chrome
2024-04-23 00:22:19
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas.
2024-04-19 15:37:47
Il n'y a aucune sortie dans la fenêtre parent
2024-04-18 23:52:34
Où sont les didacticiels sur la cartographie mentale CSS ?
2024-04-16 10:10:18
Hot Tools
Collection de bibliothèques d'exécution vc9-vc14 (32 + 64 bits) (lien ci-dessous)
Téléchargez la collection de bibliothèques d'exécution requises pour l'installation de phpStudy
VC9 32 bits
Bibliothèque d'exécution de l'environnement d'installation intégré VC9 32 bits phpstudy
Version complète de la boîte à outils du programmeur PHP
Programmer Toolbox v1.0 Environnement intégré PHP
VC11 32 bits
Bibliothèque d'exécution de l'environnement d'installation intégré VC11 phpstudy 32 bits
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Sujets chauds
Article chaud
Prédiction des dix principales tendances du marché des cryptomonnaies en 2025 : où est la prochaine tendance ?
2025-11-07
By DDD
Comment identifier les projets de chiens autochtones dans le cercle monétaire ? Évitez les pièges et les avertissements de risque du Zerocoin
2025-11-07
By DDD
Tutoriel sur la résolution des problèmes de priorité des requêtes CSS @media et de couverture des règles
2025-11-07
By DDD