画像を遅延読み込みできるJavaScriptライブラリ「echo.js」の使い方

画像を遅延読み込みできるJavaScriptライブラリ「echo.js」の使い方

画像を遅延読み込みできるJavaScriptライブラリ「echo.js」の使い方

echo.jsは、画像を遅延読み込みさせて、表示速度の向上に貢献するJavaScriptライブラリです。

echo.jsは単体で動作するため、jQueryなどに依存しません。Lazy Load系のライブラリはjQueryに依存するものが多いので、単体で動作するのはありがたいですね。

echo.jsの使い方

ステップ1. echo.jsのダウンロードと設置

まずはGitHubからecho.jsをダウンロードしてサーバーに設置しましょう。必要なファイルは「dist/echo.min.js」だけです。

サーバー上にファイルを設置したら、下記を<head>~</head>内か</body>の直前に記述して、echo.jsを読み込みます。

<script src="js/echo.min.js"></script>

ステップ2. HTMLのマークアップ

画像のマークアップは、以下のようにします。

<img src="placeholder.jpg" data-echo="image.jpg">

src属性には画像が読み込まれる前のプレースホルダー画像をセットできます。プレースホルダーはなくても大丈夫ですが、画像の分の高さがなくなった状態になる場合がありますので、セットしておいた方が良いでしょう。

本来の画像はdata-echo属性にセットします。

ステップ3. echo.jsの起動

最後にecho.jsを起動します。<head>~</head>内か</body>の直前に以下を追記します。echo.min.jsを読み込んだ後に記述するようにしてください。

<script>echo.init();</script>

オプションも指定する場合は、下記のように記述します。


<script>
echo.init({
  offset: 0, //オフセット値(画像にどれくらい近付いたら読み込むか)
  offsetVertical: 0, //上下方向のオフセット値
  offsetHorizontal: 0, //左右方向のオフセット値
  offsetTop: 0, //上方向のオフセット値
  offsetBottom: 0, //下方向のオフセット値
  offsetLeft: 0, //左方向のオフセット値
  offsetRight: 0, //右方向のオフセット値
  throttle: 250, //処理の間隔(スクロールが止まってから画像が読み込まれるまでの時間)
  debounce: true, //throttleを有効にするかどうか
  unload: false, //画像が表示範囲から外れた時に読み込み前に戻すかどうか
  callback: function (element, op) { //コールバック
    console.log(element, 'has been', op + 'ed')
  }
});
</script>

あとがき

非常にシンプルなライブラリですが、プレースホルダーもセットできますし、必要最小限な機能は備わっていますね。動作も軽くて良い感じです。

画像の遅延読み込みを導入しようとお考えの方は、ぜひご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です