[js] imgのonLoadをPromiseで検知する方法 (customElements)

例えばimgタグで404が返ってきた画像を差し替える時やなんかにとりあえず使える。
customElementsを使ってPromiseをプロパティに設定しておくことで、ほぼ確実にonLoadを追加してPromiseを別スコープのJavaScriptから確認できる。

window.customElements.define("async-img", class extends HTMLImageElement {
  constructor() {
    super();
    this.whileLoad = new Promise((resolve, reject) => {
      this.addEventListener("load", (event) => {
        resolve(event);
      });
      this.addEventListener("error", (event) => {
        reject(event);
      });
    });
  }
}, { extends: "img" });

HTMLの書き方。

<img is="async-img" src="">

Promiseの待ち方の一例

await Promise.allSettled(
  [...document.querySelectorAll(`img[is="async-img"]`)].map((element) => {
    return element.whileLoad;
  })
)