HTML <img> loading-egenskap

HTML <img> etikett

Definition och användning

loading Egenskapen specificerar om webbläsaren ska ladda bilden omedelbart eller fördröja laddningen av bilden utanför skärmen, tills exempelvis användaren rullar till dem.

Tips:Ange endast loading="lazy" Lägg till till bilden under skärmen.

Exempel

Lägg till fördröjd laddning för bilden under toppsidan:

<img src="/i/photo/beijing.jpg" alt="Beijing" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="Shanghai" style="width:100%">
<!-- Bild utanför skärmen -->
<img src="/i/photo/wuhan.jpg" alt="Wuhan" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="Shanghai" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-2.jpg" alt="Shanghai" style="bredd:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="Shanghai" style="bredd:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="Sportpark" style="bredd:100%" loading="lazy">

Prova själv

Syntaks

<img src="URL" loading="eager|lazy">

Attributvärde

Värde Beskrivning
eager Standard. Ladda in bilder omedelbart.
lazy Ladda in bilder med fördröjning tills vissa villkor är uppfyllda.

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 Stödjer inte 64.0

HTML <img> etikett