Lazyloaderより優秀?画像の遅延読み込みをするlazysizesを導入する方法

画像の遅延読み込みはLazyloadが有名ですが、最近だとlazysizesというスクリプトが人気になっているみたいです。

lazysizesは画像の遅延読み込みはもちろん、iframeやウィジェットなどのスクリプトの遅延読み込みも可能です。

しかもスクリプト自体がjQueryに依存していないため、単体でも動かすことができる優れものです。

というわけで今回はlazysizesの導入の仕方を紹介します。

 

lazysizesの導入方法

必要となるファイルはGithubにあがっているのでダウンロードしましょう。

たくさんあるファイルの中で必要になるものはlazysizes.min.jsのみです。早速読み込んでしまいます。パスは適宜変更してください。

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

 

導入はたったこれだけです。

 

lazysizesの使い方

lazysizesの使い方は簡単です。

data-src属性に画像のパスを指定し、class=”lazyload”を追加するだけです。

iframeでも同じ感じでdata-srcにはパスを指定します。

<img data-src="image.jpg" class="lazyload" />
<iframe class="lazyload" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe>

 

これだけで遅延読み込みが有効になりました。超簡単です。

 

backgroundに指定した画像も遅延読み込みする方法

imgにはdata-src属性やクラスを指定することができますが、CSSのbackgroundプロパティに背景画像を指定するとdata-src属性やクラスは指定できません。

backgroundプロパティで読み込んだ画像にも遅延読み込みを有効化したい場合は、ls.unveilhooks.min.jsというファイルが必要になります。

lazysizes → pluginsフォルダ → unveilhooksフォルダの中に入っているはずです。これを以下のように追加で読み込みます。

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

 

使い方は同じようにclass=”lazyload”を指定し、data-bg属性にパスを指定するだけです。

具体例はこんな感じです。

<div class="lazyload" data-bg="bg-img.jpg">
  <!-- 中身 -->
</div>

 

以上がlazysizesの導入方法と使い方です。

本当に簡単に使えるのでかなり導入しやすいですね。