Определить, загружено ли изображение (тег изображения) с 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, даже если img находится внутри picture tag

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>