Question

到目前为止，我们正在检测是否已按照以下方式在JavaScript中加载了img

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位于picture标签内，您也可以收听img标签onload事件

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>

检测图像（图片标签）是否已加载JS

1 个答案: