求助：基于Promise实现图片加载监听及超时处理的问题

问题描述 #

我有一个通过原生JS（vanilla JS）实现的图片画廊页面，需要等待所有图片加载完成（或超时）后，再执行图片重排脚本。当用户修改页面设置（如设置筛选器）时，AJAX脚本会重新加载或添加图片，这些图片以预渲染HTML的形式返回。此时若立即执行脚本，图片尚未完全加载，会缺失宽高这类脚本所需的关键信息，因此必须等待图片加载完成。

我的思路是：获取DOM中所有class为"articleimage"的图片，为每张图片创建一个Promise，当图片加载完成或超时（短时间）时resolve；将所有Promise存入数组，通过Promise.all()监听，待其resolve后调用图片重排脚本。

我此前未直接使用过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());

现在遇到两个问题：

1. 不确定Promise的实现是否正确，能否被Promise.all()正常监听；
2. 担心addEventListener('load')不可靠，若图片已缓存或加载完成，监听事件可能不会触发；同时不知道如何添加1秒超时逻辑，在图片加载失败时resolve Promise。

当前代码完全无法运行，希望得到解决建议。

问题分析与修复 #

1. 原代码的核心错误 #

• forEach回调写法错误：image => function(image) 是错误的箭头函数用法，应该直接写成 (image) => { ... }，否则回调不会执行，listOfPromises 会是空数组。
• then方法传参错误：then(adjustImagesForGalleryView()) 会立即执行函数，而不是等待Promise完成后执行，应该传函数引用 then(adjustImagesForGalleryView)。

2. 解决load事件不可靠与超时问题 #

• 图片缓存时，load 事件不会触发，需要先检查图片的 complete 属性，如果已经加载完成，直接resolve。
• 用 setTimeout 实现超时逻辑，超时后强制resolve，避免脚本一直等待。

修正后的完整代码 #

function waitForImages() {
    const articleImages = Array.from(document.getElementsByClassName("articleimage"));
    const imagePromises = articleImages.map(image => {
        return new Promise(resolve => {
            // 图片已加载完成（缓存），直接resolve
            if (image.complete) {
                resolve(true);
                return;
            }

            // 监听load事件
            const onLoad = () => {
                resolve(true);
                image.removeEventListener('load', onLoad);
                image.removeEventListener('error', onError);
            };

            // 监听error事件（加载失败时也resolve，避免卡住）
            const onError = () => {
                resolve(false);
                image.removeEventListener('load', onLoad);
                image.removeEventListener('error', onError);
            };

            image.addEventListener('load', onLoad);
            image.addEventListener('error', onError);

            // 1秒超时，强制resolve
            setTimeout(() => {
                resolve(false);
                image.removeEventListener('load', onLoad);
                image.removeEventListener('error', onError);
            }, 1000);
        });
    });

    return Promise.all(imagePromises);
}

// 使用方式
waitForImages().then(() => {
    adjustImagesForGalleryView();
});

关键说明 #

• map替代forEach：用map更简洁直接生成Promise数组，避免手动push。
• complete属性检查：处理图片已缓存的情况，确保不会遗漏已加载的图片。
• 移除事件监听：避免内存泄漏，在resolve后移除load/error事件监听。
• error事件处理：图片加载失败时也resolve，防止Promise.all因为单个图片失败而卡住。
• 超时逻辑：1秒后强制resolve，保证脚本不会无限等待加载缓慢的图片。
• then方法正确传参：传入函数引用，确保在Promise完成后才执行重排脚本。

内容的提问来源于stack exchange，提问作者Levi Pike