I am using the template below:
<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>
Is it possible to detect when all images have loaded in this template so that I can toggle isLoaded to true once they are all loaded? My goal is to prevent displaying the entire div until everything has been loaded to avoid flickering of loading images (some load faster than others).
<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>
I attempted the following approach:
var images = document.getElementsByClassName('sight-photos');
images.onload = function () {
console.log('hey')
}
However, I did not see the console message. I also tried this:
var images = document.getElementsByClassName('sight-photos')[0];
images.onload = function () {
console.log('hey')
}
With this, I was able to see the message, leading me to believe that onload cannot be used on a collection of images. Is there another way to achieve this?