この講座の内容はYouTubeに動画がアップされています。
よければ合わせてご覧ください。
Lazy Load とは
この講座でやること
今回使用するUTSUWAテーマではトップページやユニットにはすでにLazy Load対応されています。
カスタムフィールドやEntry_Summaryなどのモジュールでは自分で設定する必要があるため
企業情報ページの「事業内容」を例にLazy Loadを設定を行っていきましょう。
設定方法
Lazy Load 機能はVer. 2.11で追加された機能になります。おさらいまでにまずは画像がlazy-loadで表示されるようにしてみましょう。
「事業内容」の部分は /themes/utsuwa/include/module/template/Entry_Summary/card.html になるのでそちらのテンプレート開いて下記のimg要素を見つけましょう。
<img src="%{MEDIA_ARCHIVES_DIR}{thumbnail_image@path}[resizeImg(580,220)]" width="580" height="220" alt="" class="acms-img-responsive card-bordered-img">こちらのimg要素にjs-lazy-loadとclass属性をつけます。
<img src="%{MEDIA_ARCHIVES_DIR}{thumbnail_image@path}[resizeImg(580,220)]" width="580" height="220" alt="" class="js-lazy-load acms-img-responsive card-bordered-img">次にsrc属性はロード時に表示する画像、画像のパスはdata-srcに変更をします。
もともとのソースコードのままsrc属性に実際に表示する画像のパスを書いて置くだけでも機能はしますが、何もない場所から画像が表示されるようになります。
できるだけロード時の画像を用意・設定し、実際に表示する画像はdata-src属性で指定するようにしましょう。
<img src="/images/placeholder/load.svg" data-src="%{MEDIA_ARCHIVES_DIR}{thumbnail_image@path}[resizeImg(580,220)]" width="580" height="220" alt="" class="js-lazy-load acms-img-responsive card-bordered-img">ふわっと下から画像が表示されるようになれば大丈夫です。
アニメーションを変更してみよう
Ver. 2.12ではアニメーションがデフォルトで設定されるようになりました。
先ほど実装したようにデフォルトでは下からふわっとフェードで表示されるアニメーションになっています。
そこでこのアニメーションを好きなアニメーションに変更してみましょう。
アニメーションがどのように実装されているのか
js-lazy-loadのclass属性がついているimg要素ではそのページで表示領域に入ったときにJSでloadingと言うclass属性が付与されるようになっています。
js-lazy-loadのスタイルを見てみるとtranslateYで下方向に30pxずらしopacityで不透明度を0にしています。
そして読み込まれたタイミングで元の位置に戻し、不透明度を1に戻しています。
loaded: (el) => {
el.addEventListener('load', () => {
if (el.tagName === 'IMG') {
const img = new Image();
img.onload = () => {
el.classList.add('loaded');
};
img.src = el.getAttribute('src');
} else {
el.classList.add('loaded');
}
});
setTimeout(() => {
el.classList.add('loading');
}, 100);
},.js-lazy-load {
position: relative;
width: 100%;
height: 100%;
transform: translateY(30px);
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
&.loading {
transform: translateY(0);
opacity: 1;
}
}実際にアニメーションを変更してみよう
仕組みがわかったところで実際にアニメーションを変更してみましょう。
サンプルで方向の変更、縮小で表示されるアニメーションを用意してみたのでコピー&ペーストで反映してみましょう。
上方向から表示する
.js-lazy-load {
transform: translateY(-30px);
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
transform: translateY(0);
opacity: 1;
}右方向から表示する
.js-lazy-load {
transform: translateX(30px);
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
transform: translateX(0);
opacity: 1;
}左方向から表示する
.js-lazy-load {
transform: translateX(-30px);
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
transform: translateX(0);
opacity: 1;
}縮小しながら表示する
.js-lazy-load {
transform: scale(1.2);
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
transform: scale(1);
opacity: 1;
}CSSの変更で簡単にアニメーションは変更できるためぜひ好みのアニメーションに変更してみてください。
番外編
今回の講座で行ったようにLazy Load機能を使用することで必要な時にコンテンツを表示させるようにすることができパフォーマンスの改善につながります。
ですがJavaScriptで埋め込む要素などはLazy Loadでは対応することができません。
そこで組み込みJSですでにあるIn Viewを使用したパフォーマンス改善の方法についてもご紹介します。
