Как вызвать обратный вызов onload при загрузке изображений webp?

Как мы знаем, мы могли бы вызвать обратный вызов onLoad для img элементов для загрузки изображений. как то, что я сделал для этого:

var i = new Image();
if (crossOrigin) i.crossOrigin = crossOrigin;

i.onload = function () {
  decode && i.decode ? i.decode().then(resolve)["catch"](reject) : resolve();
};

i.onerror = reject;
i.src = src;

Но если я использую форматы avif или webp с тегом picture, как я могу дождаться события загрузки? что-то вроде:

<picture>
    <source srcset="img/photo.avif" type="image/avif">
    <source srcset="img/photo.webp" type="image/webp">
    <img src="img/photo.jpg" alt="Description of Photo">
</picture>