2019年3月26日javascript前回はlazysizes.jsを使った基本的な遅延読み込みをご紹介しました。連載中にバージョンが4.1.4から4.1.5になってました、メンテされてるっていいですね。今回はlazysizes.jsの拡張機能の一部をご紹介します。3段階読み込みにするまとめlazysizesを拡張するlazysizes.jsとlazysizes-plugin.jsの部分は適宜書き換えてください。lazysizesを拡張する場合は、同期読み込みの方が高速になります。位置はbody下部がおすすめです。window.lazySizesConfig.initをfalseにすることで自動実行を抑制します。lasysizes本体とプラグイン(拡張)を読み込みます。lasySizes.init()を明示的に呼び出して実行を開始します。deferを使わないのかasyncが使えないのはわかるとして、deferを使えばいいのでは?という声が聞こえてきそうですね。deferは実行順が保障される非同期読み込みですが、実行タイミングはDOMContentLoadedの後になります。lazysisesの拡張機能にはHTML・CSSのパースが完了する前に実行しないと意味がないものがありますから、deferでは実行タイミングが遅すぎるということになります。body下部がいいのか読み込みは早いほうがいいからhead下部でもいいのでは?という声も聞こえてきそうです。これに限らず同期スクリプトはbody下部に書くのが無難です。head内に同期スクリプトを書いてしまうと、bodyのDOM構築ができていないため、実行時に対象が見つからず意味がありません。背景画像,動画,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のモジュールを遅延読み込みします。これらの属性は組み合わせて利用可能です。1で紹介したdata-expandも効きます。慣れてくるとclass=”lazyload”を忘れがちなので注意しましょう。アスペクト比を指定して高さを自動計算するaspectratio拡張を使用します。100%;}data-aspectratioにアスペクト比を指定します。横16:縦9の場合は16/9。縦1:縦2の場合は1/2、もしくは0.5でもOK。これでimg要素の幅が可変長でもアスペクト比がわかっていれば自動的に大きさを計算して確保しておくことができます。3段階読み込みにするblur-up拡張を使用します。デモサイトでblur-up拡張を使った場合の挙動を確認することができます。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の拡張は他にもたくさんあります。公式ドキュメントのプラグインも参考にしながら快適な遅延読み込みを実装してみましょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。