画像をひたすら埋め込んだだけのページ(loading="lazy")

目的

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

char acter_post.png

drin k_cafe_milk_jag.png

kanj i_byan.png

kanj i_taito.png

land mark_kanda_myoujin.png

musi c_drum_pedal.png

niga oe_michael_faraday.png

plan t_ojigisou.png

robo t_henkei.png

spor ts_saga_gatalympic.png

swee ts_marzipan_cake.png

trav el_train_bus_ibiki_urusai.png

yuen chi_viking.png