在图片标签内设置loading=“lazy”不起作用？

Question

我想尝试基于本机浏览器的延迟加载，而不是我目前使用的基于 JS 的方法，因为现在

loading="lazy"

属性得到了很好的支持：caniuse 加载属性。

但是，因为它确实适用于标准 img 标签，如下所示：

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

由于某种原因，它不适用于图片标签。据我了解，您需要做的就是将

loading="lazy"

属性放在图片标签内的 img 标签上。

我创建了一个示例页面，有 12 个图片标签。每个都有 2 个 source 标签和 1 个 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 中“网络”选项卡的屏幕截图

这是一个使用

<picture>

标签但不使用 loading="lazy" 属性的示例：请注意，第一张图像位于首屏上方，并且不存在延迟加载属性。

相同的示例，但具有

loading="lazy"

属性：

和相同的示例，但

没有

<picture>标签（仅

<img>

标签）：

结论

图片标签示例加载所有 12 个图像，但使用存在的属性推迟它们。

• img 标签示例加载 9 个图像，其余 3 个在滚动时加载。
这些图像远远超出了折叠范围，但它们仍然无需滚动即可加载。我觉得，即使使用有效的 img 标签，它的负载也太低了，但那是另一个故事了。话虽如此，

loading="lazy"

确实改变了行为，但它似乎只是推迟了图像，而不是等待滚动。

这是一个错误，还是我做错了什么？

Answer 1