Help us understand the problem. What is going on with this article?

究極で軽量なlazyloader。lazysizes

More than 5 years have passed since last update.

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

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

良いとこ

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

悪いとこ

  • 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とてもよいし未来を感じる。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした