画像の遅延ロードをしてみたので、自分の理解やしたことを、備忘録としてメモ。
lazyestload.js という Javascript のライブラリーを使用。
参考サイト
以下のサイトを参考にさせていただきました。
https://coliss.com/articles/build-websites/operation/javascript/lazyestload-js.html
https://techmemo.biz/javascript/lazyestload-js/
画像の遅延ロードとは
画像が多いWEBサイトを高速化するための、定番の手法。
WEBサイトのページは、通常は、そのページの画像が全て読み込まれた（ダウンロードされた）後でないと、表示されない。
スクロールしないと見えないような位置にある画像も含め、全てが読み込まれるまで、画面が真っ白になって待たされる。（くるくる回るようなローディングのアニメーションは、この待ち時間を感じさせないようにするもの）
画像の遅延ロードとは、最初にページを表示する時は、画像を読み込まず、後で読み込んでいく手法。
この手法をWEBサイトで用いて、トップで最初に見える画像だけを読み込んでホームページをいったん表示させる。
スクロールしないと見えない画像は、スクロールしてその位置が近づいてきたら初めて読み込むようにする。
それにより、サイトの最初の表示が速くなる。
最近はモバイルの影響で、縦に長い1ページに多くの内容が詰め込まれ、どんどんスクロールして見ていくようなサイトが多いので、このような手法が必要。
HTMLの書き方
lazyestload.js を使用した場合の書き方。
※ライブラリーのダウンロード元は後述。
<body>
・・・
<!--遅延ロードしたい画像のimgタグに、lazyestloadというCSSクラスを設定する。-->
<!-- src : 読み込まれる前に表示する代替画像のパス、 dara-src : 表示したい画像のパス-->
<img src="image/loading.gif" data-src="image/picture.jpg" class="lazyestload">
・・・
<!--lazyestload.jsへのリンク-->
<script src="lazyestload.js"></script>
</body>
- bodyの閉じタグの前に、lazyestload.jsへのリンクを書く。
- 遅延読み込みする画像の img タグで、以下の設定をする。
<img src="読み込まれる前に表示する代替画像" data-src="表示したい画像" class="lazyestload">
lazyestload.jsのダウンロード手順
以下のサイト（github）にアクセスする。
https://github.com/Paul-Browne/lazyestload.js以下の画面の［Clone or download］ボタンをクリックし、［Download ZIP］をクリックするとダウンロードが始まる。
2でダウンロードした圧縮ファイルを解凍する。
解凍したフォルダーの中の、dist フォルダー > js フォルダーの中にあるファイル「lazyestload.js」を使用する。
サンプルコード
自分が試したサンプルのHTMLを載せておきます。（画像20個で試した）
Google Chromeで動作確認しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>画像の遅延読み込みサンプル</title>
<style>
#image-list{
display:grid;
gap:20px;
/* 一枚が幅500pxで、ブラウザの画面幅に応じた個数が横に並ぶ */
grid-template-columns: repeat(auto-fill, 500px);
}
img{
/* これをしないと画像がオリジナルのサイズに広がって大変なことに。 */
width:100%;
}
</style>
</head>
<body>
<h1>画像の遅延読み込みサンプル</h1>
<div id="image-list" >
<!-- 「loading_big.gif」は、幅500pxの透明な四角の真ん中に、小さなローディングのくるくるアニメGIFを合成したもの。 -->
<!-- 合成しないと、ローディングGIFが幅500pxに広がってしまっておかしな見た目になった。 -->
<div><img src="image/loading_big.gif" data-src="image/1000_-2535888.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_0267.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_083492.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_1341881.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_2516641.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_284512.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_601194.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_ant-1822636.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_nd-1979445.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1000_rfly-1127666.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_-2535888.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_0267.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_083492.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_1341881.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_2516641.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_284512.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_601194.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_ant-1822636.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_nd-1979445.jpg" class="lazyestload"></div>
<div><img src="image/loading_big.gif" data-src="image/1500_rfly-1127666.jpg" class="lazyestload"></div>
</div>
<!--lazyestloadライブラリの読み込み-->
<!--lazyestload.js は、js/venderの中に置いた-->
<script src="js/vender/lazyestload.js"></script>
</body>
</html>
感想
この便利なライブラリーを開発してくださった Paul Browne さんや、使い方の情報を提供してくださる方々に、感謝です。