Vue 로딩 애니메이션을 구현하고 동시에 URL에서 이미지를 로드합니다.

Question

<p>이미지가 로드될 때 로딩 애니메이션을 표시하고 싶지만 어떻게 해야 할지 모르겠습니다. <br /><br />로더가 없는데 디버깅을 했는데 콘솔에 "true"와 "false"가 표시됐지만 여전히 로딩 애니메이션이 나오지 않았습니다.

<pre class="brush:php;toolbar:false;"><템플릿> <div class="KingOfMountain"> <Spinner v-if="isLoading"/> //// 오류 <div v-else class="컨테이너"> <div v-if="!isEndGameKing" class="choices"> <p id="score">{{ currentCountKing }}/{{ ALL_FILMS.length - 1 }} <p/> <div class="사진"> <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"에서 게임을 가져옵니다. "@/comComponents/Spinner/Spinner"에서 Spinner를 가져옵니다. //CSS에서는 모두 괜찮습니다. 효과가있다 기본값 내보내기 { 이름: "KingOfMountain", 데이터() { 반품{ isLoading:거짓 } }, 구성요소: {Spinner}, 방법: { chooseLeftFilm() { this.isLoading=true this.redirectToResultKing() // 믹스인의 메서드입니다(모두 좋음, 작동합니다). this.isLoading=false }, chooseRightFilm() { this.isLoading=true this.firstFilm = this.secondFilm; this.redirectToResultKing() // 믹스인의 메서드입니다(모두 좋음, 작동합니다). this.isLoading=false } }, } <p>如果我使用，它会显示加载动画：</p> <pre class="brush:php;toolbar:false;">chooseLeftFilm() { this.isLoading=true this.redirectToResultKing() // 믹스인의 메서드입니다(모두 좋음, 작동합니다). },</pre> <p>// 영원히 회전할 것입니다</p> <p>저희가 如何更好地加载动画?</p> <p>내가 좋아하는 混入(믹스인):</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)] }, 리디렉션ToResultKing() { 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 데이터 = 가져오기(URL)를 기다립니다; const dataResponse = data.json()을 기다립니다. const 영화=dataResponse.data 커밋("setData", 영화) }, }, 돌연변이: { setData(상태, 영화) { state.films = 영화 }, }, 게터: { ALL_FILMS(상태) { 반환 상태.필름 }, } }</pre> <p><br /></p>

Answer 1

일반적인 방법은 Image 개체를 사용하여 이미지를 로드한 다음 로드 이벤트를 사용하여 데이터가 로드될 때까지 기다린 후 로드 프로세스 중에 로드 애니메이션을 표시하는 것입니다. 그런 다음 이미지의 URL을 설정하면 즉시 업데이트됩니다.

으아악 으아악