画像の遅延読み込みをしても読み込まれる

公開日:

初期表示に必要ない img タグの loading プロパティに lazy を設定しても、開発者ツールで確認すると読み込まれてしまっていることがありました。

調べてみました。

Chromium の遅延読み込みの実装では、ビューポートに表示される前に画像を取得することで、ユーザーがスクロールして画像が表示される頃には読み込みが完了するように、オフスクリーン画像を十分に早い段階で読み込みます。

ウェブ向けのブラウザレベルの画像遅延読み込み | Articles | web.dev

lazy を設定しても初期表示に近い場所の画像は、読み込まれるということみたいです。

HTMLImageElement: loading プロパティ - Web API | MDN

遅延読み込みコンテンツを修正する | Google 検索セントラル | ドキュメント | Google for Developers