HTML/Attribute/loading

Browserunterstützung
caniuse.com

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

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.

Liste der HTML-Attribute

• Medien-Attribute
  • alt
  • autoplay
  • buffered
  • controls
  • data
  • default
  • height
  • ismap
  • kind
  • label
  • loading
  • loop
  • mediagroup
  • muted
  • played
  • poster
  • preload
  • sandbox
  • sizes
  • src
  • srcdoc
  • srclang
  • srcset
  • type (embed, object, source)
  • volume
  • width
• Universalattribute
• Aria-Attribute
• Formular-Attribute
• Listen-Attribute
• Meta-Attribute
• Tabellen-Attribute
• Verweis-Attribute
• obsolet oder gelöscht

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