没错，是你理解的这样。很简单就是 onload 被第二个给覆盖了

new Promise() 是同步方法，没错 是同步🐶

你说的这一大串跟 promise 没什么关系。element.onload=handler 这种写法早就不推荐了，应该用 addEventListener 。

别折腾了 用 rx ！

一个不负责任的优化方案（以能用就行为原则）：
const message = () => {
  return new Promise((resolve, reject) => {
    if (img.complete) {
      resolve("Image loaded successfully");
      return;
    }
    const prevOnload = img.onload;
    img.onload = () => {
      if (prevOnload) {
        prevOnload();
      }
      resolve("Image loaded successfully"); // 返回回调函数的结果
    };
  });
};

其实关键在于不要出现无法“resolve”的 Promise 对象。

在你这种场景下就是尽量使用 addEventListener 而不是 onXXX 。因为 onXXX 容易不小心被覆盖。

这就是单纯的 onload 只会执行一次而已，跟你的 Promise 也没什么关系，虽然这么写很奇葩就是了

```
import { fromEvent } from 'rxjs';

const clicks = fromEvent(img, 'onload');
clicks.subscribe(x => { <你的业务逻辑> });
```
不要自作聪明发明那些不可维护的代码，你能想得到的场景，早已有无数前辈替你趟过坑。
等你哪天觉得 “RxJS 不过如此，我还有个更好的想法” 的时候，再发明也不迟（顺便发几篇论文）

真别 rxjs 一直说了，原生 api 就有解决方案，就是 addeventlister 添加事件触发函数，防止重复绑定，建议读读这篇

https://zh.javascript.info/introduction-browser-events#addeventlistener

这种带有副作用的函数(绑了时间没有解绑)调一次可以, 调两次不行. 因为元素是一个 onload 时间只会在第一次触发, 甚至如果不立刻调用都不会触发. 正常的操作应该写成无副作用的函数, 怎么改成无副作用的函数 每次都新建一个插入 body, 绑定有 addEvent 用完了解绑, 删除元素

都是说的什么啊，问题明明出在 onload 被覆盖上面啊