lazysizesとは

lazysizesとは、画像やiframe要素の遅延読み込み(レイジーローディング)を簡単に実装できるようにしてくれるライブラリです。
通常、webページにアクセスするとページ上の全ての画像を一度に読み込もうとするので画像が多いと読み込みに時間がかかってしまいます。
なので、ファーストビューで表示される画像だけ読み込んで、それ以外の画像はスクロールしてきた時に読み込むようにしてページの表示速度を上げるといった技術が出てきました。
lazysizesは、それを簡単に実現させてくれるものです。

lazysizesを使った遅延読み込みの実装方法

CDNが用意されているので、今回はCDN経由での実装方法を紹介します。

ライブラリの読み込み

<script type="text/javascript" async="" src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.1/lazysizes.min.js?ver=1.0"></script>

あとは、src属性で指定しているURLをdata-srcという属性に指定してlazyloadというクラスを追加するだけです。

<img data-src="image.jpg" class="lazyload" />

基本的には、これだけで遅延読み込みできるようになります。

JavaScript無効時に画像などが表示されないので、noscript要素を使って表示できるようにする

非常に便利なレイジーローディングですが、lazysizesを使って遅延読み込みをした場合、そのままではJavaScript無効時に表示されないという現象が起こってしまいます。
lazysizesはJavaScriptライブラリで、JavaScriptが動作しないと処理ができないからです。

なので、noscript要素を使ってJavaScript無効時は通常読み込みで表示できるようにしようと思います。
noscript要素の中のコードは、JavaScriptが無効の場合のみ処理されるのでそれを利用します。

<noscript><style>.lazyload{display: none !important;}</style></noscript>

<img class="lazyload" data-src="image.jpg">
<!-- 遅延読み込みするimg要素の直後に下記noscript要素を記述するようにしてください -->
<noscript><img src="image.jpg"></noscript>

上記コードで、JavaScriptが無効の場合でも画像が表示されるようになります。
やっていることは、JavaScript無効時はimg要素を通常読み込みで読み込むようにして、遅延読み込み用のimg要素はdisplay:noneで非表示にしているだけです。(非表示にしないと要素分の領域が確保されてnoscriptタグ内で読み込まれているimg要素の位置がズレてしまう)

最後に

まぁ、JavaScriptが無効な環境なんて今時ほぼないのかもしれませんが、表示されないというのは気持ちが悪かったので対応することができて良かったです。