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

前提・実現したいこと

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

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

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

該当のソースコード

js
1/* images lazy ----------------------------------------------- */
2  if ("loading" in HTMLImageElement.prototype) {
3    let images = document.querySelectorAll('img[loading="lazy"]');
4    let sources = document.querySelectorAll("source[data-srcset]");
5    sources.forEach(function (source) {
6      source.addEventListener('load', function () {
7        source.classList.add('fadeIn'); // これが付与されない
8      });
9      source.srcset = source.dataset.srcset;
10    });
11    images.forEach(function (img) {
12      img.addEventListener('load', function () {
13        img.classList.add('fadeIn');  // こちらは付与される
14      });
15      img.src = img.dataset.src;
16    });
17  } else {
18    let script = document.createElement("script");
19    script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js";
20    script.async = true;
21    document.body.appendChild(script);
22    let script_02 = document.createElement("script");
23    script_02.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/plugins/object-fit/ls.object-fit.min.jss";
24    script_02.async = true;
25    document.body.appendChild(script_02);
26  }
27  /* images lazy ------------------------------------------- end */

html
1<picture>
2   <source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="image.webp" style="width: 190px; height: auto">
3   <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;">
4</picture>

CSS
1.lazyloading, img[loading="lazy"], source[data-srcset] {
2  visibility: hidden;
3  opacity: 0;
4}
5
6.lazyloaded, img[loading="lazy"].fadeIn, source[data-srcset].fadeIn {
7  visibility: visible;
8  opacity: 1;
9  transition: opacity 1s, transform 2.5s;
10}

試したこと

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

js
1sources.forEach(function (source) {
2      source.closest('picture').addEventListener('load', function () {
3        source.classList.add('fadeIn');
4      });
5      source.srcset = source.dataset.srcset;
6    });

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

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

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

追記です。

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

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

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

Firefox 最新版, Safari 604.1

行動規範の内容に同意します

回答2件

自己解決

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

css
1.lazyloaded, img[loading="lazy"].fadeIn, source[data-srcset].fadeIn {
2  visibility: visible !important;
3  opacity: 1 !important;
4  transition: opacity 1s, transform 2.5s;
5}