是否需要持有HTMLImageElement引用以避免其在load/error事件触发前被垃圾回收？

这个问题问得很关键！答案是是的，你必须持有这些HTMLImageElement的引用，否则确实存在图片被垃圾回收（GC）、导致load/error事件无法触发的风险。

为什么会有这个风险？ #

当你通过new Image()创建图片实例后，如果没有任何存活的引用指向它，JavaScript引擎的垃圾回收机制会判定这个对象“不再被需要”，很可能在图片加载完成前就把它回收掉。一旦对象被回收，绑定在它上面的load/error事件监听器也会跟着失效，对应的事件自然不会触发——这会直接导致你的Promise一直处于pending状态，永远无法resolve，代码相当于卡住了。

看你代码里的问题 #

你当前的代码中，循环创建的image变量只在当前迭代的作用域内存在，循环结束后就没有引用指向这些Image实例了，只有当load事件触发时才会把实例push到images数组里。这中间的时间差（从设置src到事件触发）里，GC完全有可能把没被引用的Image实例回收，导致部分图片的事件永远不会触发。

怎么修复？ #

很简单，把创建好的Image实例立刻加入到images数组，从创建开始就持有有效的引用，GC就不会随便回收它了。修改后的循环部分如下：

for (const url of urls) {
    const image = new Image();
    images.push(image); // 提前持有引用，避免被GC回收
    image.src = url;
    image.addEventListener("load", onLoad);
    image.addEventListener("error", onError);
}

补充说明 #

可能有人会说“有些浏览器好像没这个问题”——确实，部分浏览器会对正在加载资源的元素做特殊处理，暂时保留引用直到加载完成，但这不是ECMAScript标准规定的行为，不同浏览器（甚至同一浏览器的不同版本）表现可能不一致。为了保证代码在所有环境下稳定运行，绝对不要依赖这种非标准的“特殊照顾”，主动持有引用才是最靠谱的做法。

备注：内容来源于stack exchange，提问作者vanilla