バニラ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で遅延読み込みを行いたい場合
関連記事
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法
あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という ...
-
-
JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法
JavaScriptのalert / confirmはブラウザによって表示位置や ...