Можно ли load = "lazy" использовать на <source>

Question

Я знаю, что могу использовать loading="lazy" для <img> и <iframe> для ленивой загрузки браузера, но могу ли я также использовать этот атрибут для <source>? Не могу найти связанную документацию.

Примерно так:

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

Answer 1

Нет, его нельзя использовать в источнике, потому что элемент <picture> должен иметь внутри один элемент <img>. Этот <img> может иметь атрибут lazy. Затем браузер сам определяет (по крайней мере, я надеюсь, что это так), какие из исходных тегов он должен загружать лениво.

Описание picture из MDN

Элемент HTML содержит ноль или более элементов <source> и один элемент <img>, чтобы предложить альтернативные версии изображения для различных сценариев дисплея / устройства ios.

Итак, правильный код для отложенной загрузки источника должен быть:

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