画像を遅延ロード、つまりユーザが該当部分までスクロールした時にはじめて画像をロードする UI、を実現したい。jQuery の Lazy Load Plugin というのがデファクトとしてあるようだが、今回はモバイル向けのサイトがターゲットだったので、このために jQuery をまるまる配信するのは避けたかった。

例えば zepto ベースとかもっと軽いのを探していたところ、 Echo.js がよさげだった。

Echo.js, simple JavaScript image lazy loading

ライブラリには何も依存せず単体で動き、サイズも 1KB を切るのでいい感じ。使い勝手も lazy load plugin とほぼ同じ。

対象の img タグには、data 属性に画像の url を指定しておき、src にはロードまでの仮画像を指定しておく。

仮画像には echo.js のデモページ のようにローディングインジケータのアニメ gif を指定してもいいし、例えば空の gif を data url でこんな風に指定しておいてもいい。

あとは echo.js を読み込んで実行してあげるだけでよい。