Detect if image (picture tag) is loaded with JS

Question

So far we are detecting if img is loaded following way in javascript

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

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

I wonder do same rules apply when we use <picture> tag like this?

<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>

And if not, how we detect when image is loaded. Thank you

Answer 1

You can listen to img tag onload event, even when img is inside 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>