HTML <img> loadingAttribut
Beispiel
Fügen Sie Lazy Loading zu mehreren Bildern am unteren Rand der Seite hinzu; sie werden nur angezeigt, wenn die Maus zu ihrer Position scrollt:
<img src="/images/wedding.jpeg" alt="Hochzeit" style="width:100%">
<img src="/images/rocks.jpeg" alt="Felsen" style="width:100%">
<!--Bild mit aktiviertem Lazy Loading-->
<img src="/images/paris.jpeg" alt="Paris" style="width:100%" loading="lazy">
<img src="/images/nature.jpeg" alt="Natur" style="width:100%" loading="lazy">
<img src="/images/underwater.jpeg" alt="Unterwasser" style="width:100%" loading="lazy">
<img src="/images/ocean.jpeg" alt="Ozean" style="width:100%" loading="lazy">
<img src="/images/mountainskies.jpeg" alt="Berge" style="width:100%" loading="lazy">
Selbst ausprobieren »
Browser-Unterstützung
| Attribute | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Nicht unterstützt | 64.0 |
Definition und Verwendung
Das loading-Attribut gibt an, ob der Browser ein Bild sofort laden oder das Laden aufschieben soll.
Einstellungloading="lazy"Es wird nur angezeigt, wenn die Maus zur Position des Bildes scrollt.
Syntax
<img src="URL.html" loading="eager|lazy">
Attributwert
| Wert | Beschreibung |
|---|---|
| eager | Standardmäßig wird das Bild sofort geladen. |
| lazy | Das Bild wird verzögert geladen; es wird nur angezeigt, wenn die Maus zur Position des Bildes scrollt. |
HTML <img> Tag Weitere Erweiterungen