N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

WEB制作

【lazyload】lazysizes.jsの使い方 – 基本編

投稿日:2018年12月3日 更新日:

javascript

前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。
今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。

準備

npmでインストール

bowerでインストール

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にメディアクエリを登録しておくことができます。

Case4. iframeの遅延読み込み

通常のiframeタグにdata-src属性とlazyloadクラスを付与するだけです。

Case5. 背景画像の遅延読み込み

lazyload -> lazyloading -> lazyloaded とクラスが遷移します。
これを利用すると背景画像の遅延読み込みができます。

あらかじめbackgroundを設定しておいて、要素が近づいてきたらbackground-imageを上書きします。
この手法は応用の幅が広いです、bg-stage.lazyloaded::beforeとかできます。

CSSメディアクエリを使えばレスポンシブ対応も可能です。
ただし、retinaを考える場合はbgset拡張を使う必要があります。

codepenで挙動を確認できます。

See the Pen lazysizes-bg by yabonary (@mtbk4919naoki) on CodePen.

Tips1. 読み込み効果をつける

フェードイン

codepenで挙動を確認できます。(効果時間を長くしてわかりやすくしています)

See the Pen lazysizes by yabonary (@mtbk4919naoki) on CodePen.

ブラーアップ

codepenで挙動を確認できます。(効果時間を長くしてわかりやすくしています)

See the Pen lazysizes-blur-up by yabonary (@mtbk4919naoki) on CodePen.

Tips2. 遅延読み込みで要素の大きさが変わって困った時

遅延読み込みで要素の大きさが変わると、他の要素の座標も動いてしまいます。
そんなときは、lazybeforeunveilイベントをトリガーにして座標の再取得などができます。

lazysizesは遅延読み込みが完了した時にlazybeforeunveilイベントを発火します。
もちろんjQuery.on()でも利用できます。

まとめ

  • lazysizes.jsは画像のiframeを遅延読み込みを実現する
  • npmでもbowerでもCDNでも利用できる
  • 本番画像はdata-src、代替画像はsrcで設定
  • data-expandを設定すると読み込み開始位置が動かせる
  • img要素やpicture要素にdata-srcset属性をつけてレスポンシブ対応できる
  • iframeも遅延読み込みできる
  • クラス遷移を利用して背景画像の遅延読み込みができる
  • クラス遷移を利用して読み込み効果をつけられる
  • 遅延読み込みで困ったらlazybeforeunveilイベントをトリガーに

今回はプラグイン(拡張)を使わずにできる基本編でした!
lazysizes本体だけでやりたいことはほとんど実現できますね。

「JSやCSSも遅延ロードできると嬉しいんだけど。」
「いちいち画像の縦横を指定するなんて真っ平御免だ、自動計算できないの?」
「プレースホルダー、LQIP、オリジナルの3段階でリッチな遅延読み込みにしたい!」

ーなんてわがままな人たちはlazysizesの使い方 – 拡張編をお楽しみに。

-WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ストロークフォント風アニメーションを作ろう

前回はsvgラインアニメーションをご紹介しました。 今回はsvgアニメーションを使ったストロークフォント風アニメーションです。 See the Pen lineAnimation by vivus-i …

svgラインアニメーションを使おう

さて、皆さんsvg使ってますか? 少しとっつきにくいsvgですが、使えると表現の幅が広がります。 今回は、簡単に使えるsvgラインアニメーションをご紹介します。 svgの詳しい仕様についてはW3Cのド …

【lazyload】画像の遅延読み込みのメリット・デメリット

目次 画像の遅延読み込みとはメリットデメリットライブラリ・プラグインlazysizes.js(非同期読み込み)lazyload.js 1.x (jQuery依存)lazyload.js 2.x (同期 …