HTML/Attribute/loading

Das loading-Attribut legt fest, wie externe Medien geladen werden sollen.

erlaubte Werte	auto eager: Medien over the fold sollen bevorzugt geladen werden lazy: Medien außerhalb des sichtbaren Bereichs sollen erst geladen werden, wenn der Benutzer scrollt.
default-Wert	auto
erlaubt in	iframe, img, video
Browsersupport	Details bei caniuse.com: loading-lazy-attr

Beispiel

<img src="hund.gif" alt="der wilde Hund" loading="eager">

Die Bildquelle wird bevorzugt geladen, damit die Grafik beim Seitenaufbau schon gerendert werden kann.

Beachten Sie: Die Browser führen das späte Laden aber nur durch, wenn width- und height-Attribut der Bilder im img-Tag notiert sind.

Bei der Verwendung alternativer Bilder mit dem picture-Element werden das loading-Attribut (und ggf. width und height) im img-Element notiert. Die für den Media-Query passende source ersetzt dann lediglich die Bildquelle im src-Attribut, die Lazy-Loading-Attribute werden „übertragen“:

Lazy-Loading und Media-Queries

<picture>
    <source media="(min-width: 80em)" srcset="Blume-1200.jpg">
    <source media="(min-width: 60em)" srcset="Blume-600.jpg">
    <!---Fallback--->
    <img src="Blume-400.jpg" alt="wilde Blume vor einem Gebirgssee"
        loading="lazy" width="…" height="…">
</picture>

Siehe auch

• Bilder im Internet
  • Bilder im Internet/Einbindung mit img
• OnePager/Komfort-Version(Lazy Loading)

Weblinks

• W3C: the loading attribute
• MDN: Lazy loading