Introduction

更新日: 2018-09-04

Echo.jsは、他のライブラリに依存していない、画像のlazy-loading(遅延ロード)ライブラリです。 Echo.jsは高速で、たった2kBしか無く、HTML5のdata-*属性を使います。
Echo.jsはIE8以上で動作します。
試しに、デモを確認してみてください。

インストール

bower

$ bower install echojs

npm

$ npm install echo-js

手動インストール

ソースをダウンロードして、HTMLでecho.min.jsを読み込むことも出来ます。
distフォルダのコンパイル済みのファイルであることを確認して、フォルダに設置します。 bodyタグの閉じタグの前にスクリプトを設置して、スクリプトの実行時点でDOMツリーが生成済みになるようにしてください。

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

使い方

Echo.js(以下Echo)はとても簡単です。画像をページに追加する際に、imgタグにdata-echoを追加するだけです。また、背景画像を遅延ロードしたい場合は、画像のURLを持つ要素にdata-echo-backgroundを追加するだけです。

<body>
 
  <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
 
  <script src="dist/echo.js"></script>
  <script>
  echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log(element, 'has been', op + 'ed')
    }
  });
 
  // echo.render();は非スクロールのコールバックでも使うことができます。
  </script>
</body>

デモ

ページを更新した際に、スクロール等で画像の一部が画面内に入るとローディングを開始し、画像を表示します。

JavaScript

echo.init({
  offset: 100,
  throttle: 250,
  unload: false,
  callback: function (element, op) {
    console.log(element, 'has been', op + 'ed')
  }
});

HTML

<img src="./img/blank.gif" data-echo="./img/1.jpg">
<img src="./img/blank.gif" data-echo="./img/2.jpg">
<img src="./img/blank.gif" data-echo="./img/3.jpg">

CSS

img {
  background: #FFF url("../img/ajax.gif") no-repeat center center;
  border: 1px solid #ededed;
}

このコンテンツはTodd Motto(toddmotto)によるEcho.jsドキュメントを翻訳/改変したものです。