Vue.js 等待加载多个图像

我要加载多个图像，并将它们放入一个数组中

在循环中，我在加载图像时增加一个计数器

当此计数器等于图像的数组长度时，我想删除加载指示器

我不知道为什么，那是行不通的

newvue({
el:“应用程序”，
创建（）{
设imageLoaded=0；
for（此.imagesToPreload的常量imageSrc）{
if（imageLoaded==this.imagesToPreload.length）{
console.log（“完成！”）；
这一点：加载=错误；
}
const img=新图像（）；
img.src=imageSrc；
img.onload=（）=>{
imageLoaded++；
控制台日志（imageLoaded）；
};
}
},
数据（）{
返回{
孤岛加载：是的，
图像停止重新加载：[
"https://placeimg.com/1280/800/any",
"https://placeimg.com/1280/800/any",
"https://placeimg.com/1280/800/any"
]
};
}
});

加载。。。
设置图像源后，您的代码将立即检查是否加载了图像。它不会等到实际加载任何图像

在我看来，最好的办法是使用承诺：


newvue({
el:“应用程序”，
创建（）{
const images=this.imagesToPreload.map（imageSrc=>{
返回新承诺（（解决、拒绝）=>{
const img=新图像（）；
img.src=imageSrc；
img.onload=解析；
img.onerror=拒绝；
});
});
承诺。所有（图像）。然后（（）=>{
log（“已加载图像！”）；
this.isLoading=false；
}).catch（错误=>{
控制台。错误（“某些映像加载失败！”）；
console.error（error.message）
});
},
数据（）{
返回{
孤岛加载：是的，
图像停止重新加载：[
"https://placeimg.com/1280/800/any",
"https://placeimg.com/1280/800/any",
"https://placeimg.com/1280/800/any"
]
};
}
})

加载。。。
变量正在加载，您将变量“加载”设置为false。。。请把代码缩进更好。对不起，缩进不好，我已经更新了我的帖子。谢谢