Echo.jsメモ

Echo.jsはウェブページで画像を遅延ロードするためのライブラリ
対象画像の上部の指定した領域が表示された際にロードが開始される。

利用する手順は以下のとおり

対象画像のimgタグの設定

<img src="ロードされる前に表示する画像のurl" data-echo="遅延ロードする対象のurl" >

関数の設定

  Echo.init({
      //遅延ロードが開始される画像の上部の範囲(px)
      offset: 100,
      //スクロールした際に画像の位置などを計算して遅延ロードを実行するか判断する関数の実行間隔(ms)
      throttle: 250
  });

例
echo.jsでoffsetが0のときのデモ
画像の最上部の領域が表示された際にロードが始まる。

echo.jsでoffsetが1000のときのデモ
ページが表示された際にロードが始まる。

Echo.jsのデモページのローディング画像はcssのbackgroundプロパティを利用して実装されている。
サンプル