画像の遅延読み込み時に、幅・高さ、アスペクト比を指定する

CLS対策や画像の遅延読み込み（lazyload）の際に、オリジナル画像（遅延読み込みされる画像）の幅（width）や高さ（height）、アスペクト比を設定する方法を紹介します。

特に遅延読み込みされる前のダミー画像とオリジナル画像のアスペクト比が異なっていると、オリジナル画像が読み込まれるまで表示がガタついたり、切れて表示されたりします。

今回これらの問題を解決するために lazysizesJS と aspectratioJS を使用します。

imgタグのclassに遅延読み込み用の lazyload、アスペクト比を指定するための lazyaspectratio を設定します。

<img class="lazyload lazyaspectratio img_lazy_aspectratio" 
  src="ダミー画像パス" data-src="オリジナル画像パス" data-aspectratio="">

JSの処理

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/plugins/aspectratio/ls.aspectratio.min.js" defer></script>

<script type="text/javascript">
  window.lazySizesConfig = window.lazySizesConfig || {};
  window.lazySizesConfig.expand = 100;

  $(function() {
    // class名（"img_lazy_aspectratio）で対象のimg要素を取得
    const imgs = document.getElementsByClassName('img_lazy_aspectratio');

    for (const img of imgs) {
      // img要素のdata-src属性の値（オリジナル画像パず）を取得
      const src = img.getAttribute('data-src');

      onloadImage(src).then(function(res) {
        // 読み込みが完了した（画像が設定された）Imageオブジェクトを受け取って処理
        // imgタグの各属性に値を設定する
        img.setAttribute('width', res.width);   // 幅
        img.setAttribute('height', res.height); // 高さ
        img.setAttribute('data-aspectratio', res.width + '/' + res.height); // アスペクト比
      });
    }
  });

  // 画像読み込み時の処理
  function onloadImage(src) {
    return new Promise(function(resolve, reject){
      const image = new Image();
      // 読み込む画像を設定（関数の引数で取得した画像パスを代入）
      image.src = src;

      image.onload = function(){
        // 読み込み成功時にthenの処理へ
        resolve(image);
      }
    });
  }
</script>