jQuery不要の軽量レイジーロード！echo.jsの使い方

2015.12.02 (Wed)

この記事は、Advent Calendar、「らいとなデブ SYNCER」の2日目の記事です。jQueryを使わずに、JavaScriptだけで画像の遅延読み込み(通称:レイジーロード)を実現する軽量ライブラリ、echo.jsを紹介します。当サイトでも、脱jQueryを進めるにあたって、2015年10月頃より導入しました。

機能について

当サイトでは以前まで、jquery.lazyloadというレイジーロードの定番ライブラリを使用していましたが、2015年10月頃より、このecho.jsに鞍替えしました。

Lazy Load(画像の遅延読み込み)を実装する方法: 画面に表示されていない画像を読み込まないLazy Loadを実装することで、ページスピードや転送を劇的に改善できます。初心者向けに導入方法を説明。

良い点

echo.jsの良い点は「jQueryに依存しないこと」です。当サイトではページスピードを向上するためにjQueryからの脱却を図っており、その目的でこのecho.jsを導入しました。正直なところ、目に付く良い点と言えば、それくらいです。だから、既に他のレイジーロードライブラリを利用していてそれに問題がない場合、わざわざ、このecho.jsに変更する理由はないでしょう。

悪い点

echo.jsは、機能が多くありません。例えば、私が以前使っていたjquery.lazyloadは、「マウスカーソルを重ねた時に読み込みを開始する」「画像をフェードインで表示する」などといった多数のオプションがありましたが、echo.jsにはそれがありません。なお、多機能でないことはネガティブに思えますが、裏を返せば「無駄な機能がない」とも言えますね。私は、「ユーザーにはレイジーロードであることを意識させたくない」という理由から「フェードインなど無駄な演出はいらない」と考えていて、それらの機能がなくなっても問題がないどころか、その分、ファイルサイズが減って歓迎という認識です。

サンプルデモ

echo.jsを使って、画像の遅延読み込みをするサンプルデモです。分かりやすくなるように、あえて、読み込みのタイミングを遅めにとっています。スクロールを停止してから500ミリ秒経過後に、画像の読み込みが始まります。

デモを見る (VIEW DEMO)

ライブラリの入手

echo.jsはGithub上でダウンロードすることができます。まずはライブラリを入手して下さい。

toddmotto/echo: GitHub上にある公式プロジェクトページ。「Download ZIP」というリンクから、ライブラリをダウンロードすることができます。

ダウンロードしたecho-master.zipを解凍すると、いくつかのファイルが含まれています。その中から利用するのは、下記2つのファイルの内1つだけです。どちらも内容は同じですが、min(Minifyの略)は、改行や空白を取り除いて、ファイルサイズを軽量化されています。

echo-master.zip

echo-master
- dist
  - echo.js
  - echo.min.js

プログラミング

それでは早速、echo.jsを使ったレイジーロードを実装してみましょう！このライブラリは、特別な知識なしの初心者でも簡単に扱えます。

ファイルの読み込み

まずはヘッダー内で、ライブラリを読み込みましょう。echo.jsでも、echo.min.jsでも、どちらでもかまいません。厳密にはヘッダー内でなくてもかまいませんが、JavaScriptを読み込む順番を間違えにくくする意味で、ヘッダー内で読んでおくと安心です。

HTML

<head>
	<!-- ライブラリの読み込み -->
	<script src="./echo.js"></script>
</head>

画像の配置

続いて、画像を配置しましょう。img要素の、本来ならsrc属性値に画像のパスを指定します。が、echo.jsを使う場合は、data-echo属性値に指定することになります。ここでsrc属性に指定した画像は、本来の画像が読み込まれる前に表示されるプレースホルダー画像になります。なので、例えば、読み込み前にローディングアニメーション画像などを表示したい場合は、src属性値に指定しておくと良いでしょう。

HTML

<!-- [data-echo]に画像のパスを指定 -->
<img src="./dummy.png" data-echo="./image.jpg">

echo.jsを起動する

準備ができたら、echo.jsを起動してみましょう。init()メソッドを次のように実行して下さい。実際に画像がレイジーロードされるかを確認してみて下さいね。ちなみにですが、ライブラリを読み込んだ後ならば、起動のコード(init())はどこで記述してもかまいません。bodyの最後でもいいし、head内でも大丈夫です。

HTML

<body>

	...

	<script>
		// echo.jsを初期化(起動)する
		echo.init() ;
	</script>
</body>

レイジーロードが分かりにくい場合

なお、echo.jsは動作がとても速い良ライブラリです。レイジーロードが本当にされているか分かりづらい場合は、先ほどの方法ではなく、init()メソッドを使って次のように起動するとよいでしょう。「スクロールを止めてから、1秒後に画像の読み込みを開始する」という命令です。

JavaScript

// echo.jsを初期化(起動)する
echo.init( {
	throttle: 1000 ,	// スクロールを止めて1秒(1,000ミリ秒)後に読み込み開始する
} ) ;

オプション

echo.jsは、init()メソッドを使って起動する時に、オブジェクトリテラルでオプションを指定することができます。オプションは、任意の項目だけを指定することができます。

JavaScript

// 通常の起動方法
echo.init() ;

// オプションを指定した起動方法
echo.init( {
	offset: 0 ,	// オフセット値
	throttle: 500 ,	// 処理の間隔
} ) ;

指定できるオプションは、下記の通りです。

プロパティ名	説明
offset	オフセット値をピクセルで指定する。オフセット値とは、何ピクセルまで画像に近づいた時点で読み込みを開始するか、の値を指す。初期値は`0`。ユーザーにレイジーロードを意識させたくないなら、高めの数値を指定して、読み込みのタイミングを早めておく。
offsetVertical	上下方向のオフセット値。
offsetHorizontal	左右方向のオフセット値。
offsetTop	上方向のオフセット値。
offsetBottom	下方向のオフセット値。
offsetLeft	左方向のオフセット値。
offsetRight	右方向のオフセット値。
throttle	ここで指定したミリ秒以内の間隔では処理をしないようにする。処理とは、スクロールイベントにおける画像の位置確認から読み込み判定、実行までの一連の処理を指す。仮に`0`を指定すれば、スクロール中、連続で処理が実行されてブラウザに負担がかかる。「スクロールを停止してから何秒後に画像の読み込みを開始するか」でもある。初期値は`250`。
debounce	`throttle`を有効にするか否かをBoolean値で指定する。`throttle`を指定しても、ここで`false`を指定すれば意味がない。初期値は`true`。
unload	画像が、オフセット値を考慮したビューポート外に出た時に、再び、読み込み前の状態に戻すか否かをBoolean値で指定する。初期値は`false`。
callback	コールバック関数を指定すると、読み込み、または読み込みキャンセル(`unload`)の完了時に実行する。コールバック関数の引数は、第1引数が対象のエレメント、第2引数がイベント名(読み込み完了なら`load`、読み込みキャンセルなら`unload`)。

ダウンロード

この記事で紹介してきた、各サンプルコードやデモページを配布しています。echo.jsは、公式サイトでダウンロードして下さい。

ファイル一覧

ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。

ご利用の際は、付属のREADMEファイル(readme.txt)をご確認下さい。

echo.jsはzipファイルの中に含まれていません。

Download Zip

機能について

良い点

悪い点

サンプルデモ

ライブラリの入手

プログラミング

ファイルの読み込み

画像の配置

echo.jsを起動する

レイジーロードが分かりにくい場合

オプション

ダウンロード

このブログについて