edited to remove a part of the question that was a duplicate个
我有一个页面，加载到一个 gallery 的一堆图像，然后通过香草JS很好地重新排列它们.
为此，脚本必须等到所有图像都已加载(或超时).更改页面设置(就像用户设置过滤器一样)会导致AJAX脚本重新加载或添加图像.它们被作为预渲染的HTML页面发送.在这种情况下，当脚本立即运行时，图像尚未完全加载，从而丢失了脚本的关键信息，如宽度和高度.所以我需要等待，直到我得到这个信息(=所有图像都已完全加载).
这就是我的方法背后的 idea :我try 通过类名获取DOM这一部分中的所有图像， for each 图像添加一个promise ，以解决图像是否完全存在或短时间超时结束的问题.我想将所有这些promise 添加到一个数组中，然后使用Promise.All()判断该array.这解决了应该调用脚本来重新排列图片.
我以前从来没有直接与promise 合作过，我对JS也有些新手.
这就是我所拥有的:
function articleImageLoadingStatusChecker() {
const articleImages = Array.from(document.getElementsByClassName("articleimage"));
var listOfPromises = [];
articleImages.forEach(image => function(image) {
listOfPromises.push(
new Promise(resolve => {
image.addEventListener('load', () => { resolve(true); });
}));
});
return listOfPromises;
}
Promise.all(articleImageLoadingStatusChecker()).then(adjustImagesForGalleryView());
以下是我的问题:
-
我不确定我是否正确地实现了promise ，因此它实际上可以由Promise.all()进行判断.
-
我认为addEventListener(‘Load’，..)可能具有误导性，实际上不是要请求的正确状态.调用图库脚本时，图像可能已缓存或已加载，因此可能不会调用监听程序.我宁愿有一些，解决在任何情况下的promise ，如果图像是完全加载.此外，我目前没有线索如何添加一些东西，以解决1秒后的promise ，以防图像无法加载.
目前，这根本不起作用，我也没有 idea 了. 我们非常欢迎您的任何建议.谢谢.