バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaScriptのファイルが読み込まれており、これは何なのかと調べたところ画像遅延読み込み系のライブラリみたい。また「lazyload」と違いはバニラJS対応(jQuery非依存)及び軽量とのこと。以下に使用方法をメモ。

lazysizes

GitHub

https://github.com/aFarkas/lazysizes

CDN

CDNで使う場合は以下を記述する。

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

異なるバージョンを使用したい場合は以下から探す。

https://cdnjs.com/libraries/lazysizes

サンプル

https://taitan916.info/sample/lazysizes/

サンプルページでは軽めの画像を使用しているため、ブラウザの開発者ツール→ネットワークで見た方が(遅延読み込みされているのが)分かりやすい。

利用方法

以下が基本的な使い方になる。

<img src="ダミー画像のパス" data-src="遅延読み込みさせる画像のパス" class="lazyload">

サンプルページの場合だと以下ソースコードになる。

<div><img src="./img/dummy.jpg" data-src="./img/001.jpg" class="lazyload"></div>
<div><img src="./img/dummy.jpg" data-src="./img/002.jpg" class="lazyload"></div>
<div><img src="./img/dummy.jpg" data-src="./img/003.jpg" class="lazyload"></div>
<div><img src="./img/dummy.jpg" data-src="./img/004.jpg" class="lazyload"></div>
<div><img src="./img/dummy.jpg" data-src="./img/005.jpg" class="lazyload"></div>

その他

ライブラリを使わずにHTMLで遅延読み込みを行いたい場合

lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法

lazyloadで遅延読み込みを行いたい場合

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法