ギャラリーサイトやたくさんの写真を載せるブログなどでは、どうしても画像の重さで読み込みが遅くなってしまいます。
そんな時に便利なのが遅延ロード、Lazy Loadの呼び方の方が有名ですかね。最初の読み込みではファーストビューに必要なものだけを読み込んで、ページ下部の写真はそのあと、もしくはスクロールに応じて読み込んでいくやつです。
今回はそんな機能をさくっと実装できるlazySizesを紹介します。
用意するもの
コアファイルは公式サイトからダウンロード出来ますが、npmもあります。
<script src="lazysizes.min.js" async=""></script>
他に付属のプラグインがたくさんあるんですが、基本的にはこれだけで大丈夫です。
基本的な使い方
lazySizesさえ読み込んでしまえば、とりあえず使う上ではjsの記述は必要ありません。下記のようにdata-srcに使用する画像パスを入れ、classにlazyloadを指定するだけです。
<!-- 普通に使う -->
<img data-src="photo.jpg" class="lazyload" />
<!-- レスポンシブで出力パスを変える -->
<img data-sizes="auto" data-src="photo.jpg" data-srcset="photo1.jpg 320w, photo2.jpg 768w" class="lazyload" />
基本はこれで問題ありませんが、オプションやプラグインがすごくたくさんあります。例えば下記のようなものです。
// ターゲットclassの変更
lazySizesConfig.lazyClass = 'lazy';
// ロード済みclassの変更
lazySizesConfig.loadedClass = 'loaded';
// onloadが終わったら指定要素をまとめてローディング
lazySizesConfig.preloadAfterLoad = true;
詳しくはこちらのGitHubをご参照ください。
プラグインを使って背景画像を遅延ロード
プラグインも豊富で例えば背景画像を遅延ロードすることも出来ます。その他にjsやcssなんかも可能です。こういったプラグイン解説のページを見ていくと良いでしょう。
<!-- data-bgに設定した画像がbackground-imageとして設定される -->
<div class="lazyload" data-bg="bg.jpg"></div>
<!--cssやjsはこんな感じです-->
<div class="lazyload" data-script="scripts.js"></div>
<div class="lazyload" data-link="style.css"></div>
全てのプラグインを読むのは大変ですが「こういう機能が欲しい！」というのはだいたいあるような気がするので、都度探してみると良いかと思います。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
