[WIP] 画像が重い、レスポンシブル、Retina対応、それ lazysizes で解決できます

lazysizesはsrcsetなどレスポンシブの画像やiframe、script、widgetsにも対応した高速ジャンクフリーで、SEOにも対応可能な、画像の遅延読み込み用ライブラリです。ライブラリを読み込むだけで、使えるようになりますよ。

レスポンシブな画像に関する開発においては最高の手法になることは間違いなし。
CSSのmeadia属性とメディアクエリを共有して、レスポンシブの画像のサイズを自動で計算してくれる。CSSでのレイアウトと、HTMLでのコンテンツ・構造を分離するのに役立つはず。
使い方も超シンプル。しかも機能を拡張するための追加のプラグインもあるので使ってみてほしい。

使い方

1. まずは、ミニファイされたlazysizesのスクリプトをダウンロードして、Webページに読み込みましょう。 npmインストールすることも可能ですよ。

# npmコマンドの場合
npm install lazysizes --save 
# bowerコマンドの場合
bower install lazysizes --save

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

1. lazysizes のすごいところはJSの設定がいらないんだ。<img><iframe>にlazyloadクラスを付け加え、datasrc, data-srcset属性で読み込む画像を設定してくれ。画像がロードされるまでの間、低画質で表示しておく仮画像はsrc要素に設定しておけば表示できるぞ。

<!-- レスポンシブなサイズの計算も自動でできるから便利だぞ: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

<!-- iframe も使えるぞ -->
<iframe frameborder="0"
    class="lazyload"
    allowfullscreen=""
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

WIP

APIについて

JS API

JS API - イベント

lazysizesはその動作を拡張もしくは変更するための3種のイベントを用意しています。