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

Question

Как мы знаем, мы могли бы назвать 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>

Answer 1

Есть несколько подходов. Вы можете использовать библиотеку или API IntersectionObserver и добавить необходимую функцию.

Вместо того, чтобы повторять что-то, сообщение SO здесь содержит некоторые материалы, которые вы можете принять по мере необходимости.

/questions/40758294/lenivaya-zagruzka-tega-izobrazheniya-html5/40758310#40758310