javascript
前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。
今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。
準備
npmでインストール
npm install lazysizes --save
bowerでインストール
bower install lazysizes --save
GitHubからダウンロード
https://github.com/aFarkas/lazysizes
Clone or downloadを押して、Download ZIPで一括ダウンロードできます。
CDNから読み込む
https://cdnjs.com/libraries/lazysizes
scriptに使用したいスクリプトのURLを打ち込むだけです。
他サイトのローカルキャッシュが利用できるのでお勧めの方法です。
lazysizesを読み込む
lazysizes本体を単体を読み込む場合はasync属性をつけて読み込むと高速です。
位置はbodyでもheadでもいいですが、非同期読み込みを活かせるheadがおすすめです。
※プラグイン（拡張）を使う場合は別の書き方があります、詳しくは拡張編をお待ちください。
Case1. 画像の遅延読み込み
- data-srcには遅延読み込みされる本番画像を設定します。（必須）
- classにはlazyloadを設定します。（必須）
- srcには遅延読み込みされるまで表示される代替画像を設定します。（オプション）
srcなしでも動きますが、srcなしだとバリデーションチェックで警告されるのでbase64エンコードした1pxの透明gifを使用しています。
ローディングアニメーションや圧縮した画像を配置してもいいです。 - width,heightを設定しておくと、遅延読み込み前にimg要素の幅と高さを確保することができます。（オプション）
- data-expandには0以外の数字を設定します。（オプション）
普通は指定しなくて問題ありませんが、大きな画像を早めに読み込み開始させたい場合などに使用します。
指定しないと、画像の読み込み状況やブラウザのアイドリング状況に応じて動的に最適化されます。
正の値を指定すると読み込み開始スクロール位置が上に（早く）なります。
負の値を設定すると読み込み開始スクロール位置が下に（遅く）なります。
data-expand属性を指定すると、動的な最適化が無効になることに注意してください。
適正値は300〜1000です。
codepenでdata-expandの挙動を確認できます。
See the Pen lazysizes by yabonary (@mtbk4919naoki) on CodePen.
Case2. メディアクエリをつけたimg要素の遅延読み込み
- data-srcsetには 本番画像とメディアクエリを付与します。
- data-sizes=”auto”を設定すると、sizes属性をいい感じにやっといてくれるようです。
viewport基準で出し分けるときはとりあえずdata-sizes=”auto”にしておきましょう。
画面密度(retina)基準で出し分ける時はdata-sizes=”auto”にしても意味がないです。
Case3. メディアクエリをつけたpicture要素の遅延読み込み
window.lazySizesConfig.customMediaにメディアクエリを登録しておくことができます。
