lazyload

2023年6月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「lazyload」を実装してみようと思います。

参考：PENGIN｜画像遅延読み込みはこれ！「lazysizes.js」の使い方を徹底解説！

lazyloadとは

lazyloadとは「遅延読み込み」のことで、画面内にある画像だけを読み込み、画面外にある画像は後から読み込むことで画面表示を高速化するしくみのことです。

lazyには「怠けている」「暇」「のんびり」という意味があるそうです。

プリーズ ドオント セイ ユー アー レイジー
...これからは えげれすごも べんきょう しないとね

lazyloadのプラグインはいくつかあるようですが、今回はlazySizesというプラグインを使ってみようと思います。

lazySizesを使ってみよう

lazysizes.jsを用意します。

GitHubからダウンロードしてヘッダー内で読み込むか、

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

またはCDNで呼び出します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>

遅延読み込みさせたい画像のsrcの部分をdata-srcに書き換えて、lazyloadというクラスを付与します。

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

以上！簡単～あまり違いがわからないけど

まとめ

ブログ一覧ページに導入したら、かなり速くなりました！

lazyloadを導入する方法はプラグイン以外にもあるようなので、今度試してみようと思います。