N.Y.C. Tech Library

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

WEB制作

【lazyload】lazysizesの使い方 – 拡張編

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

javascript

前回はlazysizes.jsを使った基本的な遅延読み込みをご紹介しました。
連載中にバージョンが4.1.4から4.1.5になってました、メンテされてるっていいですね。
今回はlazysizes.jsの拡張機能の一部をご紹介します。

lazysizesを拡張する

lazysizes.jsとlazysizes-plugin.jsの部分は適宜書き換えてください。





lazysizesを拡張する場合は、同期読み込みの方が高速になります。
位置はbody下部がおすすめです。

  1. 予めwindow.lazySizesConfig.initをfalseにすることで自動実行を抑制します。
  2. lasysizes本体とプラグイン(拡張)を読み込みます。
  3. lasySizes.init()を明示的に呼び出して実行を開始します。

Tips なぜdeferを使わないのか

asyncが使えないのはわかるとして、deferを使えばいいのでは?という声が聞こえてきそうですね。
deferは実行順が保障される非同期読み込みですが、実行タイミングはDOMContentLoadedの後になります。
lazysisesの拡張機能にはHTML・CSSのパースが完了する前に実行しないと意味がないものがありますから、deferでは実行タイミングが遅すぎるということになります。

Tips なぜbody下部がいいのか

読み込みは早いほうがいいからhead下部でもいいのでは?という声も聞こえてきそうです。
これに限らず同期スクリプトはbody下部に書くのが無難です。
head内に同期スクリプトを書いてしまうと、bodyのDOM構築ができていないため、実行時に対象が見つからず意味がありません。

Case 6. 背景画像,動画,JS,CSSの遅延読み込み

unveilhooks拡張を使用します。

 

  • data-bgはbackground-imageを上書きします。
    CSSでbackground-positionやbackground-attachmentを予め設定しておきましょう。
    これで簡易な背景画像の遅延読み込みが実装できます。
    レスポンシブ対応などより高度なことがしたい場合はbgset拡張を使用します。
  • data-linkはスタイルシートを遅延読み込みします。
  • data-scriptはスクリプトを遅延読み込みします。
  • data-posterはvideo要素のposter属性(代替画像)を遅延読み込みします。
  • data-requireはrequire.jsのモジュールを遅延読み込みします。

これらの属性は組み合わせて利用可能です。
前回Case 1で紹介したdata-expandも効きます。
慣れてくるとclass=”lazyload”を忘れがちなので注意しましょう。

Case 7. アスペクト比を指定して高さを自動計算する

aspectratio拡張を使用します。

/* css */
.img-box {
  width: 200px;
  line-height: 0;
}
.img-box img {
  width: 100%;
}

 

  • data-aspectratioにアスペクト比を指定します。横16:縦9の場合は16/9。縦1:縦2の場合は1/2、もしくは0.5でもOK。

これでimg要素の幅が可変長でもアスペクト比がわかっていれば自動的に大きさを計算して確保しておくことができます。

Case 8. 3段階読み込みにする

blur-up拡張を使用します。
デモサイトでblur-up拡張を使った場合の挙動を確認することができます。

/* css */
.img-box {
  width: 400px;
  height: 400px;
  position: relative;
}
.ls-blur-up-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ls-blur-up-img {
  filter: blur(10px);
  opacity: 1;
  transition: opacity 1000ms, filter 1500ms;
}
.ls-blur-up-img.ls-inview.ls-original-loaded {
  opacity: 0;
  filter: blur(5px);
}

 

  • srcは1段階目のダミー画像、共通で使う軽量な代替画像などを設定します。
  • data-lowsrcは2段階目のダミー画像、低品質版(LQIP)などを設定します。
  • data-srcは3段階目、オリジナル画像、最終的に表示される画像を設定します。

ポイントは例にあるimg-boxのようなラッパーを用意してposition:relativeにしておくことです。
data-lowsrcを設定すると、.is-blur-up-imgクラスがついたimg要素[src=”data-lowsrc”]が隣に生成されます。
これをposition:absoluteで上に重ねておき、オリジナル画像がロードされたらopacityを0にします。
低品質版(LQIP)はそのまま表示すると見苦しいのでブラー効果をつけています。

まとめ

  • lazysizesを拡張するときは同期読み込みでbody下部に
  • window.lazySizesConfig.initをfalseにするのを忘れない
  • lazySizes.init()の実行をわすれない
  • 背景画像,動画,JS,CSSの遅延読み込みはunveilhooks拡張
  • アスペクト比から高さを自動計算させるときはaspectratio拡張
  • 3段階読み込みにするにするときはblur-up拡張

さて、今回は使う機会の多そうな3つの拡張をご紹介しましたがlazysizesの拡張は他にもたくさんあります。
公式ドキュメントのプラグインも参考にしながら快適な遅延読み込みを実装してみましょう。

-WEB制作
-,

執筆者:


comment

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

five × 4 =

関連記事