背景画像も遅延読み込み可能なLazyload系ライブラリ「lazysizes」

lazysizesは、画像を遅延読み込みすることができるLazyload系のJavaScriptライブラリです。通常の画像だけでなく背景画像も遅延読み込み可能です。また、jQuery非依存で単体で動作します。

挙動については、以下デモページよりご確認いただけます。

lazysizesの使い方

GitHubからlazysizesをダウンロードして、lazysizes.min.jsをサーバー上に設置します。

ファイルを設置したら、HTMLの</body>の直前に以下を追加します。

<script src="lazysizes.min.js"></script>

ファイルパスは適宜変更してください。

画像のHTMLは、src属性にプレースホルダー画像(ダミー画像)、data-src属性に本来の画像をセットします。また、画像には.lazyloadクラスを付与します。

<img src="placeholder.jpg" data-src="image.jpg" class="lazyload">

プレースホルダー画像は指定しなくても大丈夫です。

iframe要素でも遅延読み込み可能で、iframeの場合は以下のように記述します。

<iframe data-src="//www.youtube.com/embed/U_N5rrfvPBs" class="lazyload"></iframe>

基本的な使い方はこんな感じです。導入は簡単ですね。

背景画像の遅延読み込みを有効化するには、lazysizes.min.jsと合わせてls.unveilhooks.min.jsも読み込む必要があります。


<script src="lazysizes.min.js"></script>
<script src="plugins/unveilhooks/ls.unveilhooks.min.js"></script>

HTMLでは、通常の画像と同様に.lazyloadクラスを付与して、data-bg属性に画像をセットします。

<div data-bg="bg_image.jpg" class="lazyload">…</div>

jQuery非依存かつ軽量なので、画像の遅延読み込みを導入しようと検討中の方はぜひ！

ちなみに、付与した.lazyloadクラスは読み込みが完了すると.lazyloadedクラスに切り替わります。この挙動を利用してCSSアニメーションを付けたりすることも可能ですね。