picture标签内设置loading="lazy"为何无法正常实现原生懒加载？

我打算用浏览器原生的loading="lazy"懒加载方案替换当前的JS实现，目前这个属性的浏览器支持度已经很高。

按标准用法，loading="lazy"在普通<img>标签里能正常工作，比如：

<img loading="lazy" src="...">

但在<picture>标签中却无法生效。我原本以为只要给<picture>内部的<img>元素加上loading="lazy"属性就可以，于是做了个测试页面：页面包含12个<picture>标签，每个标签内有2个<source>标签和1个带loading="lazy"的<img>，示例代码如下：

<picture>
  <source type="image/avif"
    srcset="..."
    sizes="...">
  <source type="image/webp"
    srcset="..."
    sizes="...">
  <img loading="lazy" alt="..." width="660" height="440"  src="img-1.jpg">
</picture>

Chrome浏览器网络面板截图 #

注：所有测试中，第一张图片位于视口上方，未添加懒加载属性。

• 未添加loading="lazy"的<picture>标签示例：
  

• 添加了loading="lazy"的<picture>标签示例：
  

• 仅使用<img>标签（无picture）的示例：
  

结论 #

• 给<picture>内的<img>加loading="lazy"后，12张图片仍会全部加载，只是加载时机稍有延迟
• 纯<img>标签的示例中，仅加载9张图片，剩余3张会在滚动到视口时才加载

这些图片都在视口下方很远的位置，但不用滚动就全部加载了。我知道即使是正常工作的纯img标签，原生懒加载的预加载范围也偏大，但这是另一个问题。现在的核心是：loading="lazy"在picture场景下只能延迟加载，却无法等待滚动触发真正的懒加载——这是浏览器的bug，还是我的操作有误？

内容的提问来源于stack exchange，提问作者dansan