HTML <img > laadkenmerk
Voorbeeld
Voeg lui laden toe aan afbeeldingen onder de vouw:
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img
src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!--
off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris"
style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg"
alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg"
alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg"
alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg"
alt="Mountains" style="width:100%" loading="lazy">
Definitie en gebruik
Het loadingattribuut specificeert of een browser een afbeelding onmiddellijk moet laden of het laden van afbeeldingen buiten het scherm moet uitstellen totdat de gebruiker er bijvoorbeeld in de buurt scrolt.
Tip: voeg loading="lazy"
alleen toe aan afbeeldingen die onder de vouw staan.
Browserondersteuning
| Attribute | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
Syntaxis
<img src="URL" loading="eager|lazy">
Attribuutwaarden
| Value | Description |
|---|---|
| eager | Default. Loads an image immediately |
| lazy | Defer loading of images until some conditions are met |
❮ HTML <img>-tag