バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無いライブラリを読み込んでいた。これは何なのか調べたところjQuery非依存の画像遅延読み込み系ライブラリみたい。以前にメモした「lazysizes」よりも軽量なのが強みっぽい。以下にサンプルと利用方法をメモ。
サンプル
https://taitan916.info/sample/echo.js/
echo.js
GitHub
https://github.com/toddmotto/echo
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/echo-js@1.7.3/src/echo.min.js"></script>
利用方法
ソースコード
<div><img src="./img/dummy.jpg" data-echo="./img/001.jpg"></div> <div><img src="./img/dummy.jpg" data-echo="./img/002.jpg"></div> <div><img src="./img/dummy.jpg" data-echo="./img/003.jpg"></div> <div><img src="./img/dummy.jpg" data-echo="./img/004.jpg"></div> <div><img src="./img/dummy.jpg" data-echo="./img/005.jpg"></div> <script src="https://cdn.jsdelivr.net/npm/echo-js@1.7.3/src/echo.min.js"></script> <script> const option = { throttle : 0, //指定したミリ秒以内の間隔では処理をしないようにする。デフォルトは250 }; echo.init(option); </script>
解説等
src属性は遅延読み込み中に表示される画像、data-echo属性は遅延読み込み後に表示される画像を指定すること。
また、オプションに関しては公式ページを参照。
その他
lazysizesとの違い
以下の通りファイルサイズが半分以下となる。
- lazysizes(ver5.3.2) -> 4.17kb
- echo.js(ver1.7.3) -> 1.73kb
遅延読み込みだけできればよく、オプション等はあまり設定しないということであればecho.jsを使うのが良いかも。
関連記事
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...
-
-
JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...
-
-
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...