lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
2024/01/16
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方法が第一候補に出てきそうだけど、JSやCSSは使わずにHTMLのみで実装できるらしい。以下に対応方法をメモ。
リファレンス
https://web.dev/articles/browser-level-image-lazy-loading?hl=ja
サンプル
https://taitan916.info/sample/img_loading/
ページ上部が赤背景になっているのは後述の「ビューポートから2500pxより下側の画像に対して遅延読み込みが効く」に関係している。
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>loading属性のテスト</title>
</head>
<body>
<div style="background: #f00; height: 3000px;"></div>
<div><img src="001.jpg" loading="lazy"></div>
<div><img src="002.jpg" loading="lazy"></div>
<div><img src="003.jpg" loading="lazy"></div>
</body>
</html>
注意点
ビューポートにある画像は遅延読み込みさせない方が良い
リファレンスにも書かれているがビューポートにある画像は遅延読み込みさせ内容が良いとのこと。なのでヘッダー画像等は通常読み込みとし、記事内にあるような画像を遅延読み込みさせるのが良さそう。
遅延読み込みされるのはビューポートから2500pxより下側
サンプルページで色々試したものの遅延読み込みされていないように見受けられ、色々調べてみるとビューポートから2500pxより下側の画像に対して遅延読み込みが効くみたい。
所感
本件で調べているうちに知ったんだけどHTML5は2021年1月28日に廃止されているらしい。全然知らなかったので非常に驚いた。
関連記事
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...
-
-
PHPにてSVGファイルをjpg / png画像に変換する方法
PHPにてSVGファイルをjpgもしくはpng形式の画像ファイルに変換したいとい ...
-
-
PHPでファイル書き込み時に「failed to open stream: HTTP～～」エラー
PHPでファイルを書き込む際に「failed to open stream: H ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法
あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...