勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラ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

  関連記事

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法

文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法

サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...

JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法

あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...

JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法

JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...