加载="lazy"用于<source>

Question

我知道我可以在<img>和<iframe>上使用loading="lazy"进行浏览器本机延迟加载，但我也可以在<source>上使用此属性吗？我找不到相关文件。

类似这样的东西：

<picture>
<source srcset="/image.webp" type="image/webp" loading="lazy"/>
</picture>

Answer 1

否，它不能在源上使用，因为<picture>元素内部必须有一个<img>元素。此<img>可以具有惰性属性。然后浏览器自己决定(至少我希望它这样做(应该延迟加载哪个源标签。

MDN 中picture的描述

HTML元素包含零个或多个<source>元素和一个<img>元素，用于为不同的显示器/设备场景提供图像的替代版本。

因此延迟加载源的正确代码应该是：

<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" alt="" loading="lazy"/>
</picture>

Answer 2

Cloned是正确的-如果使用picture来包装源，那么最后一个元素应该是回退img标记。浏览器使用img"alt"one_answers"loading="懒惰；以提供给这些来源。

例如，如果这些图像中的任何一个被提取，它们将以一种懒惰的方式进行：

<picture>
<source media="(min-width: 0)" srcset="image/bike-480.jpg">
<source media="(min-width: 800px)" srcset="image/bike-900.jpg">
<source media="(min-width: 1200px)" srcset="image/bike-1300.jpg">
<img loading="lazy" src="image/mage/bike-900.jpg" alt="man riding a blue bicycle">
</picture>