バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法
2024/08/23
あるサイトのコーディングデータを貰った際に「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で遅延読み込みを行いたい場合
関連記事
-
-
JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
-
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...