勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法

   2024/01/16  HTML

画像を遅延読み込みさせるとなるとだいぶ前に書いた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日に廃止されているらしい。全然知らなかったので非常に驚いた。

 - HTML

  関連記事

ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...

formのinput="file"でディレクトリを選択させ、ディレクトリ内のファイルを全てアップロードする方法

フォームで複数のファイルをアップロードしたい場合、input="file"を複数 ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...