source読み込み完了時にクラスを追加できない

Question

前提・実現したいこと

loading="lazy" に対応しているブラウザで、source を読み込んだときに fadeInというclassを追加したいです。

発生している問題・エラーメッセージ

エラーはなく、画像も問題なく表示されますが、sourceタグにclassが付与されません。imgタグには付与されます。

該当のソースコード

/* images lazy ----------------------------------------------- */
  if ("loading" in HTMLImageElement.prototype) {
    let images = document.querySelectorAll('img[loading="lazy"]');
    let sources = document.querySelectorAll("source[data-srcset]");
    sources.forEach(function (source) {
      source.addEventListener('load', function () {
        source.classList.add('fadeIn'); // これが付与されない
      });
      source.srcset = source.dataset.srcset;
    });
    images.forEach(function (img) {
      img.addEventListener('load', function () {
        img.classList.add('fadeIn');  // こちらは付与される
      });
      img.src = img.dataset.src;
    });
  } else {
    let script = document.createElement("script");
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js";
    script.async = true;
    document.body.appendChild(script);
    let script_02 = document.createElement("script");
    script_02.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/plugins/object-fit/ls.object-fit.min.jss";
    script_02.async = true;
    document.body.appendChild(script_02);
  }
  /* images lazy ------------------------------------------- end */

<picture>
   <source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="image.webp" style="width: 190px; height: auto">
   <img alt="nav image" class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="image.png" width="640" height="640"  style="width: 190px; height: auto;">
</picture>

.lazyloading, img[loading="lazy"], source[data-srcset] {
  visibility: hidden;
  opacity: 0;
}

.lazyloaded, img[loading="lazy"].fadeIn, source[data-srcset].fadeIn {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s, transform 2.5s;
}

試したこと

imgの方をコメントアウトして、sourceの挙動を見たところ、classが付与されていませんでした。
検索で onload 時の sourceタグの挙動を調べたのですが、調べ方が悪いのか、見つけることが出来ませんでした。
どなたか、どうしてクラスが付与されないのかご存じないでしょうか。

sources.forEach(function (source) {
      source.closest('picture').addEventListener('load', function () {
        source.classList.add('fadeIn');
      });
      source.srcset = source.dataset.srcset;
    });

と、親のpictureにイベントを登録しても、クラスはつきませんでした。
onload　のイベントを他に起こさないといけないのでしょうか。

sources.forEach(function (source) {
   source.closest('picture').querySelector('img[loading="lazy"]').addEventListener('load', function () {
        source.classList.add('fadeIn');
      });
      source.srcset = source.dataset.srcset;
    });

としたところ、sourceにfadeInクラスがつきました。
imgがロードされたら......という方法でしかイベントは起きないのかもしれません。

---

追記です。

Webpに対応している Safariで確認したところ、Webp画像（source）が表示されませんでした。CSSで元の画像は非表示に、画像がロードされたらゆっくりと読み込むCSS装飾をしているのですが、非表示のままでした。SafariなどWebpに対応しているブラウザでは、そもそも兄弟要素のimgを読み込まないのかもしれません。
これを回避する方法（ほかにイベントを起こす方法）はありますでしょうか。

（補足：サーバー上にコードがきちんと上がっているか、Firefoxで確認したところ、画像は表示されていました。キャッシュも削除しています。）

補足情報（FW/ツールのバージョンなど）

Firefox 最新版, Safari 604.1