Javascript 我是否可以检测所有图像何时加载，以便将isLoaded变量更改为true？

我有以下模板：

<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>

我试过：

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？

如果使用v-If指令，则永远不会创建元素&图像将不会加载。但是，您可以在div上使用v-show指令来创建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>

导出默认值{
数据（）{
返回{
目标：空，
加载的景点：[]
isLoaded:false
}
},
安装的（）{
axios.get（'/getSights/'+this.lat+'/'+this.lng+'/'+this.type+'/'+this.range）
。然后（响应=>{
this.sights=response.data.result.results
this.nextPageToken=response.data.result.next\u page\u令牌
this.loadedSights=this.sights.map（函数（）{return false；}）；
}).catch（（错误）=>console.log（错误））；
},
方法：{
setLoaded:函数（索引）{
this.loadedSights[index]=true；
对于（var i=0；i

很遗憾，我没有使用jQuery。我确实使用纯JavaScript更新了我的问题，尝试使用相同的代码，但是，似乎onload在图像集合中不起作用。

<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>