HTML <img> loading -ominaisuus

HTML <img> -elementti

Määrittely ja käyttö

loading Property määrittää, ladataanko kuva välittömästi vai lykätetäänkö sen lataaminen näytön ulkopuolelle, kunnes esimerkiksi käyttäjä pyörittää niiden läheisyyteen.

Vinkki:Vain loading="lazy" Lisää kuvat, jotka sijaitsevat näytön alla.

Esimerkki

Lisää viivytetty lataus ensimmäisen näytön alakuvan lisäämiseksi:

<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">
<-- Kuva näytön ulkopuolella -->
<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="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="体育公园" style="width:100%" loading="lazy">

Kokeile itse

Syntaksi

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

Atribuuttiarvo

Arvo Kuvaus
eager Oletus. Lataa kuvat välittömästi.
lazy Lataa kuvia viivytetysti, kunnes tiettyjä ehtoja täytetään.

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 Ei tuettu 64.0

HTML <img> -elementti