Lazy Loadを使って必要な時にコンテンツを表示させるようにしよう

この講座の内容はYouTubeに動画がアップされています。 よければ合わせてご覧ください。

この講座ではUTSUWAテーマを元にカスタマイズの紹介をします。 ablogcms.io ベータ版でインストールをしてください。

大量の画像を表示するWebページは、表示速度が遅くなることが非常に多いです。 ですが、Lazy Load 機能を使用することで表示領域以外のコンテンツはロードしないようになるため、最初のロード時にダウンロードするコンテンツ量が少なく済み、パフォーマンスが向上します。

その他パフォーマンス改善については過去のハンズオンでも行なっておりますのでぜひそちらをご覧ください。 https://developer.a-blogcms.jp/hands-on/camp2019autumn/performance.html#entry-2

今回使用する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の変更で簡単にアニメーションは変更できるためぜひ好みのアニメーションに変更してみてください。