lazysizes画像遅延読み込みで、ページ内スクロール(スムーススクロール)がずれてしまう問題の対処法

##はじめに
webページに画像が多い場合、lazysizesなど、画像を遅延させて読み込ませる時もあるかと思います。本記事ではlazysisesを用いた際に、ページ内スクロールがずれてしまう問題の対処法を書いておきます。また、ページ内スクロールに使うjsのコードは今回割愛します。

##原因
lazysizesで画像を遅延読み込みさせると、読み込むまで元の画像の高さが取得できないので、href属性でスクロール先を設定しても、画像の高さがない分ずれてしまう。

##解決策
表示させる画像とは別に、imgタグにダミーの画像を設定します。
表示させる画像と同じアスペクト比でダミー画像に高さを設定する。
ダミー画像に高さを設定するにはlazysizesの拡張プラグインdata-aspectratioを使用します。
では、順を追って解説します。

##念のためにpictureタグのおさらい
解説の前に、lazysizesとpictureタグを組み合わせることも多いと思うので、pictureタグの使い方を記載しておきます。

<picture>
 <source data-srcset="sample-sp.png" media="(max-width: 500px)">
 <img data-src="./sample-pc.png"　class="lazyload">
</picture>

lazysizesを使う場合、「src」と「srcset」にそれぞれ「data-」をつけます。
あとは、imgタグにlazyloadのクラスをつければOKです。

##解決策
①data-aspectratioの読み込み
②ダミー画像の設定
③ダミー画像に高さを設定
###①data-aspectratioの読み込み
lazysizesをダウンロードすると、
/lazysizes/plugins/aspectratio/
の中にls.aspectratio.min.jsがあるので、このファイルを読み込みます。

<picture>
 <source data-srcset="sample-sp.png" media="(max-width: 500px)">
 <img data-src="./sample-pc.png"　class="lazyload">
</picture>

========================= 省略 ============================== 

<script src="./js/lazysizes.js" ></script>
<script src="./js/ls.aspectratio.min.js" ></script>

これでlazysizesのプラグインファイルの読み込みはOKです。
手順③でダミー画像に高さをつけるので、そのときにこのファイルが必要になります。

###②ダミー画像の設定
ダミー画像はこちらの方の記事を引用しました。

1x1の最小GIF・PNGファイル（透過/base64）

こちらからコードを借りて、imgタグにダミー画像を設定します。
ダミー画像はsrc属性に設定します。

<picture>
 <source data-srcset="sample-sp.png" media="(max-width: 500px)">
 <img
   src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7"
   data-src="./sample-pc.png"　
   class="lazyload">
</picture>

src属性で先ほどコピーしたコードを貼り付けます。
これでダミー画像の設定は完了です。
###③ダミー画像に高さを設定
では、最後にダミー画像に高さをつけて、表示させたい画像が読み込まれてなくても高さを保てるようにします。
data-aspectratio属性を用いて、ダミー画像に高さを付けます。
data-aspectratio属性には表示したい画像のサイズ(横幅/高さ)を設定します。
例として、表示させたい画像が横幅×高さ=200×100であれば、data-aspectratio="200/100"と記述します。

<picture>
 <source data-srcset="sample-sp.png" media="(max-width: 500px)">
 <img
   src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7"
   data-src="./sample-pc.png"
   data-aspectratio="200/100"　
   class="lazyload">
</picture>

これで、webページの下の方にある読み込まれていない画像にも高さが設定されるようになります。ページ内スクロールを実行すると、画像の高さが取得できているので、ずれることなく目的の箇所へスクロールできるようになります。

####レスポンシブ対応
pictureタグを使った場合、PC、スマホで表示させたい画像の大きさが変わると思います。
その場合はsourceタグにもdata-aspectratioでスマホ用の画像の大きさを設定すれば大丈夫です。

例として、表示させたいスマホの画像が横幅×高さ=100×50の場合は、

<picture>
 <source
   data-srcset="sample-sp.png" 
   data-aspect-ratio="100/50"
   media="(max-width: 500px)">
 <img
   src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7"
   data-src="./sample-pc.png"
   data-aspectratio="200/100"　
   class="lazyload">
</picture>

このようにコードを書けば、スマホでもページ内スクロールが問題なく動きます。

##おわりに
画像遅延読み込みさせると、ページ内スクロールがうまくいかず悩んだので、同じ境遇の方はぜひこの方法を試してみてください。