2019年3月26日javascript前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。ZIPで一括ダウンロードできます。CDNから読み込むhttps://cdnjs.com/libraries/lazysizesscriptに使用したいスクリプトのURLを打ち込むだけです。他サイトのローカルキャッシュが利用できるのでお勧めの方法です。lazysizesを読み込むlazysizes本体を単体を読み込む場合はasync属性をつけて読み込むと高速です。位置はbodyでもheadでもいいですが、非同期読み込みを活かせるheadがおすすめです。※プラグイン(拡張)を使う場合は別の書き方があります、詳しくは拡張編をお待ちください。画像の遅延読み込みdata-srcには遅延読み込みされる本番画像を設定します。(必須)classにはlazyloadを設定します。(必須)srcには遅延読み込みされるまで表示される代替画像を設定します。(オプション)srcなしでも動きますが、srcなしだとバリデーションチェックで警告されるのでbase64エンコードした1pxの透明gifを使用しています。ローディングアニメーションや圧縮した画像を配置してもいいです。width,heightを設定しておくと、遅延読み込み前にimg要素の幅と高さを確保することができます。(オプション)data-expandには0以外の数字を設定します。(オプション)普通は指定しなくて問題ありませんが、大きな画像を早めに読み込み開始させたい場合などに使用します。指定しないと、画像の読み込み状況やブラウザのアイドリング状況に応じて動的に最適化されます。正の値を指定すると読み込み開始スクロール位置が上に(早く)なります。負の値を設定すると読み込み開始スクロール位置が下に(遅く)なります。data-expand属性を指定すると、動的な最適化が無効になることに注意してください。適正値は300〜1000です。codepenでdata-expandの挙動を確認できます。本番画像とメディアクエリを付与します。data-sizes=”auto”を設定すると、sizes属性をいい感じにやっといてくれるようです。viewport基準で出し分けるときはとりあえずdata-sizes=”auto”にしておきましょう。画面密度(retina)基準で出し分ける時はdata-sizes=”auto”にしても意味がないです。window.lazySizesConfig.customMediaにメディアクエリを登録しておくことができます。iframeの遅延読み込み通常のiframeタグにdata-src属性とlazyloadクラスを付与するだけです。これを利用すると背景画像の遅延読み込みができます。backgroundを設定しておいて、要素が近づいてきたらbackground-imageを上書きします。この手法は応用の幅が広いです、bg-stage.lazyloaded::beforeとかできます。CSSメディアクエリを使えばレスポンシブ対応も可能です。retinaを考える場合はbgset拡張を使う必要があります。codepenで挙動を確認できます。300ms;}codepenで挙動を確認できます。blur(0);}codepenで挙動を確認できます。遅延読み込みで要素の大きさが変わると、他の要素の座標も動いてしまいます。そんなときは、lazybeforeunveilイベントをトリガーにして座標の再取得などができます。false);lazysizesは遅延読み込みが完了した時にlazybeforeunveilイベントを発火します。jQuery.on()でも利用できます。まとめlazysizes.jsは画像のiframeを遅延読み込みを実現するnpmでもbowerでもCDNでも利用できる本番画像はdata-src、代替画像はsrcで設定data-expandを設定すると読み込み開始位置が動かせるimg要素やpicture要素にdata-srcset属性をつけてレスポンシブ対応できるiframeも遅延読み込みできるクラス遷移を利用して背景画像の遅延読み込みができるクラス遷移を利用して読み込み効果をつけられる遅延読み込みで困ったらlazybeforeunveilイベントをトリガーに今回はプラグイン(拡張)を使わずにできる基本編でした!lazysizes本体だけでやりたいことはほとんど実現できますね。「JSやCSSも遅延ロードできると嬉しいんだけど。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。