lazysizes

画像などを遅延読み込みをするlazyloaderが久々に必要になってナウいやつを探してたら見つけた。
the ultimate and lightweigth lazyLoaderだそうです。つよそう。

軽く使って良さそうなのにあまり記事がなかったので個人的まとめ。

良いとこ

• ピュアな実装でjqueryなどフレームワークに依存していない
  • jquery.lazyloadあたり使いたいけどjqueryを入れねば、みたいな問題がない。
• レスポンシブ対応などが豊富
• プラガブルな実装
• 画像以外にもスクリプトやiframeにも対応しているよう
• Star数:2625（2014/12/27時点）。
• 作者はhtml5shivなどの作者らしい
  • https://github.com/aFarkas

悪いとこ

• initial commitが3ヶ月前(2014/10）でまだまだ枯れてない
• バージョンは0.6。まだベータ的扱いかも。
• testなどまだなさそう

使い方

githubから大いに抜粋

基本

bowerなりnpmなりからリソースは落とすところは省略します。
(筆者はrailsプロジェクトでの利用だったのでrails-assets-lazysizesを使いました。）

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

scriptのasyncは必須というわけではなさそうです。

普通のlazyloaderっぽい使い方

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

ふつうですね。
<img class="lazyload">というクラス指定で遅延対象を指定します。
対象とするクラス名は設定で変更可能（後述）

レスポンシブ対応

未検証。
srcsetをlazyにしてくれるみたい。
個人的に使ったことは無いけど使いどころありそう。

<img data-srcset="responsive-image1.jpg 1x, 
responsive-image2.jpg 2x" class="lazyload" />

これを利用してLQIPという荒い画像を先行で読み込ませて遅延で高解像度に切り替えるという手法が紹介されています。

設定変更

window.lazySizesConfigに記載。

window.lazySizesConfig = {
    lazyClass: 'postbone', // lazyloadの対象とするクラスの指定。
};

オプションはたくさんあるので詳しくはこのへん

プラグインの話

lazysizesはlazybeforeunveilというイベントを発火するため、これをフックすることで何がしかの処理をかませることが出来ます。
幾つか同梱されているプラグインはだいたいこのhookを利用しているようです。

document.addEventListener('lazybeforeunveil', function(e){
    // 何らかの処理
}, false);

便利機能詰め合わせなunveilhooks plugin

これscriptを遅延させたり動画を遅延させたり地味にいろんな機能があります。
背景画像なんかはよく使いたくなる割にドキュメントが奥のほうにあって見つけるの時間かかったりしたのではまった。

背景画像

unveilhooksを読み込んでdata-bgを使うだけ。

<div class="bg lazyload" data-bg="http://cdn.qiita.com/assets/siteid-reverse-cd0519106e5814e34d402b3e821820cf.png"></div>

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

他のプラグインざっくり

他のはあんまり触ってないのも多いのでドキュメント見つつ

• RIAS plugin

  • responsiveな画像処理を外部サービスなんかに任せてしまうためのものらしい
  • data-src="http://foo.com/img/{width}x{height}"みたいな具合？

• OPTIMUMX

  • スマホなどで最適なサイズを見つけているっぽいけどよくわからなかった・・・・

• bgset plugin

  • 背景にsrcset的な動きをさせるもの。
  • 最初普通の背景のlazyにこっちを使ってしまったのでちょっと触った
  • respimageというpolyfillを使わないとchrome以外のブラウザなどでは動かない
  • そして体感たまに読み込み成功してくれない気がする（要調査）

• include plugin

  • htmlをパーシャル的にlazyでincludeするプラグインらしい。

• print plugin

  • 印刷時に全部ロードするよーというものらしい。なるほど。

まとめ

lazysizesとてもよいし未来を感じる。