バニラ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で遅延読み込みを行いたい場合
関連記事
-
-
jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法
あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...