バニラ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で遅延読み込みを行いたい場合
関連記事
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法
システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...