检测图片（picture标签）是否已使用JS加载

Question

到目前为止，在JavaScript中我们是这样检测图像是否已加载的：

objImg = new Image();
objImg.src = 'photo.gif';

if(objImg.complete) { 
    // Do something
}

我想知道当我们使用 <picture> 标签时，是否适用相同的规则？

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers">
</picture>

如果没有加载成功，我们如何检测图片是否已经加载完成。谢谢。

- Valor_

---

你只需将 load 事件监听器绑定到嵌套的 <img> 元素上即可。 - Terry

Answer 1

你可以监听 img 标签的 onload 事件，即使 img 是在 picture 标签内。

document.querySelector('img').onload = () => console.log('Image loaded');

img {
  display: flex;
  width: 600px;
  height: 600px;
}

<!--Change the browser window width to see the image change.-->
<div>
<picture>
    <source srcset="https://images.unsplash.com/photo-1553431424-636492c29609?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
            media="(min-width: 800px)">
    <img src="https://images.unsplash.com/photo-1552469489-fc91c433200c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
</picture>
</div>

- alt255