如何在webp图像加载时调用onload回调

Question

正如我们所知，我们可以在img元素上调用onLoad回调来加载图像。就像我为它所做的：

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;

但如果我使用带有picture标签的avif或webp格式，我该如何等待加载事件？类似

<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

有多种方法。您可以使用库，也可以使用IntersectionObserver API并添加所需的功能。

这里的SO帖子没有重复，而是提供了一些输入，您可以根据需要采用这些输入。

https://stackoverflow.com/a/54092875/34644