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>
あとがき
非常にシンプルなライブラリですが、プレースホルダーもセットできますし、必要最小限な機能は備わっていますね。動作も軽くて良い感じです。
画像の遅延読み込みを導入しようとお考えの方は、ぜひご検討ください。