javascript - 用JS检测图片(图片标签)是否加载

Question

到目前为止，我们正在检测 img 是否按照 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>

如果没有，我们如何检测图像何时加载。谢谢

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>