目的
Lazy-loading されるか試す。
このブラウザの loading属性対応状況:
条件
-
<img>
タグに、属性loading="lazy"
をつけた。
HTML
<img loading="lazy" src="img/car_drift.png" style="width:300px;height:300px;">
結果
- Chrome 76 だと lazy-loading される。
width
属性とheight
属性の指定は必須。代わりにstyle
で指定してもよい。- viewport内に画像が入る瞬間に読み込まれるという動作ではない。viewport より広めのエリア内に入ってきた画像を読み込んでいる感じ。つまり、先の方の画像が思ったより早く読み込まれる。
画像
car_ drift.png![](./img/car_drift_300.webp)
![](./img/character_post_300.webp)
![](./img/drink_cafe_milk_jag_300.webp)
![](./img/kanji_byan_300.webp)
![](./img/kanji_taito_300.webp)
![](./img/landmark_kanda_myoujin_300.webp)
![](./img/music_drum_pedal_300.webp)
![](./img/nigaoe_michael_faraday_300.webp)
![](./img/plant_ojigisou_300.webp)
![](./img/robot_henkei_300.webp)
![](./img/sports_saga_gatalympic_300.webp)
![](./img/sweets_marzipan_cake_300.webp)
![](./img/travel_train_bus_ibiki_urusai_300.webp)
![](./img/yuenchi_viking_300.webp)