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

【问题标题】：How to call a onload callback on webp images load?如何在 webp 图像加载时调用 onload 回调？
【发布时间】：2021-03-05 06:41:07
【问题描述】：

我们知道，我们可以在 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>

【问题讨论】：

标签： javascript webp avif

【解决方案1】：

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

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

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

【讨论】：