勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/08/23  JavaScript

あるサイトのコーディングデータを貰った際に「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」の利用方法

 - JavaScript

  関連記事

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...