Могу ли я определить, когда все изображения загружены, чтобы я мог изменить переменную isLoaded на true?

Question

У меня есть следующий шаблон:

<template>
    <div v-if='isLoaded'>
        <div @click='selectSight(index)' v-for='(sight, index) in sights'>
            <img :src="'https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=' + sight.photos[0].photo_reference + '&key='">
        </div>
    </div>
</template>

Мне интересно, можно ли как-то определить, когда все изображения загружены, чтобы я мог установить для isLoaded значение true, когда это произойдет?Я хочу не отображать весь div до тех пор, пока все не загрузится, чтобы избежать мерцания при загрузке изображений (некоторые загружаются быстрее, некоторые медленнее).

<script>
    export default {
            data(){
                return {
                    sights: null,
                    isLoaded: false
                }
            },
            mounted() {
                axios.get('/getSights/' + this.lat + '/' + this.lng + '/' + this.type + '/' + this.range)
                .then(response => {
                    this.sights = response.data.result.results
                    this.nextPageToken = response.data.result.next_page_token
                }).catch((error) => console.log(error));
            }
    }
</script>

Я пытался:

var images = document.getElementsByClassName('sight-photos');
images.onload = function () {
    console.log('hey')
}

Однако я не вижу консольного сообщения при попытке:

var images = document.getElementsByClassName('sight-photos')[0];
images.onload = function () {
    console.log('hey')
}

Я вижу сообщение, поэтому я предполагаю, что вы не можете использовать onload для коллекции изображений?

Answer 1

Если вы используете директиву v-if , элемент никогда не создается и изображение не загружается. Однако вы можете использовать директиву v-show для div, которая создаст html, но сохранит ее скрытой. Один из способов здесь - использовать массив для отслеживания всех загруженных изображений, который затем будет использоваться для обновления свойства isLoaded .

<template>
<div v-show='isLoaded'>
    <div @click='selectSight(index)' v-for='(sight, index) in sights'>
        <img 
          :src="'https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=' + sight.photos[0].photo_reference + '&key='"  
          v-on:load="setLoaded(index)"
         >
    </div>
</div>

<script>
export default {
        data(){
            return {
                sights: null,
                loadedSights: []
                isLoaded: false
            }
        },
        mounted() {
            axios.get('/getSights/' + this.lat + '/' + this.lng + '/' + this.type + '/' + this.range)
            .then(response => {
                this.sights = response.data.result.results
                this.nextPageToken = response.data.result.next_page_token
                this.loadedSights = this.sights.map(function(){ return false; });
            }).catch((error) => console.log(error));
        },
        methods: {
            setLoaded: function(index){
                this.loadedSights[index] = true;

                for (var i=0; i< this.loadedSights.length; i++){
                    if (!this.loadedSights[i]){ 
                        this.isLoaded = false;
                        return  
                    }
                }
                this.isLoaded = true;
            }
        }
}
</script>