遅延ロードを実装するのに便利な lazySizes の使い方

lazySizes

ギャラリーサイトやたくさんの写真を載せるブログなどでは、どうしても画像の重さで読み込みが遅くなってしまいます。

そんな時に便利なのが遅延ロード、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本格入門 ~モダンスタイルによる基礎から現場での応用まで