HTML <img> loading eigenschap
Definitie en gebruik
loading
Deze eigenschap bepaalt of de browser de afbeelding onmiddellijk moet laden of de afbeelding buiten het scherm moet uitstellen tot bijvoorbeeld de gebruiker er naartoe scrolt.
Tip:Gebruik alleen loading="lazy"
Voeg toe aan de afbeelding onder het scherm.
Voorbeeld
Voeg een uitgestelde laadtijd toe aan de afbeelding onder het startscherm:
<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%"> <img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%"> <!-- Afbeelding buiten het scherm --> <img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-2.jpg" alt="Shanghai" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-3.jpg" alt="Shanghai" style="width:100%" loading="lazy"> <img src="/i/photo/tiyugongyuan.jpg" alt="Sports Park" style="width:100%" loading="lazy">
Syntax
<img src="URL" loading="eager|lazy">
Attribute Value
Value | Description |
---|---|
Eager | Default. Load images immediately. |
Lazy | Lazy load images until certain conditions are met. |
Browser Support
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
77.0 | 79.0 | 75.0 | Not supported | 64.0 |