Как получить выбранный источник элемента изображения до его полной загрузки?

Question

Предполагая, что у меня есть изображение в моем HTML-коде, и я хотел бы показать спиннер, пока изображение загружается. Я мог бы сделать это, загрузив изображение в JavaScript и после загрузки скрыть счетчик, например:

async loadImage(src) {
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.onload = () => resolve(img)
    img.onerror = reject
    img.src = src
  }).catch()
}

let image = document.getElementById('#image1')

loadImage(image.src).then(() => {
  // Image loaded, spinner can be hidden.
})

Теперь я пытаюсь сделать то же самое с HTML picture элемент. Допустим, у меня есть следующий HTML-код:

<picture>
  <source srcset="image2.webp" type="image/webp" />
  <source srcset="image2.jpg" type="image/jpg" />
  <img src="image2.jpg" />
</picture>

Используя приведенный выше код JavaScript, он загрузит источник img тег, который является версией JPG. Однако браузер может даже не захотеть загружать версию JPG, а версию WebP. Я знаю о currentSrc свойство изображений, но это свойство применяется к изображению только после загрузки изображения.

В основном мне нужно знать, какое изображение загружает браузер, прежде чем он будет полностью загружен. У кого-нибудь есть идеи, как этого можно достичь?