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日に廃止されているらしい。全然知らなかったので非常に驚いた。
関連記事
-
-
PHPで画像アップロード、リサイズ、形式変換(jpg->webp等)はclass.upload.phpが便利
今までPHPで画像関連の処理を行う場合、リサイズの時のみsmart_resize ...
-
-
JavaScriptにて画像をフルスクリーン表示する方法
JavaScriptにて画像をクリックするとフルスクリーン表示させたかった。ただ ...
-
-
faviconをサイトURLもしくはpngファイルから生成する方法
AというサイトのfaviconをBというサイトで使いたかった。ただ、favico ...
-
-
summernoteで画像選択時にサーバにファイルをアップロードする方法
summernoteで画像を選択した際、ファイルはアップロードされずBase64 ...
-
-
画像をアップロードすると複数サムネイルを生成する方法
フォームで画像をアップロードすると、予め定めておいた大中小のサイズでサムネイル画 ...