バニラ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で遅延読み込みを行いたい場合
関連記事
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...