関数を遅延して実行するLazyLoadFunctionの使い方

この記事は、Advent Calendar、「らいとなデブ SYNCER」の3日目の記事です。指定したエレメントが画面内に見えたタイミングで関数を実行できる、ちょこっと便利なライブラリ、LazyLoadFunctionを公開、配布します。複数指定に対応していて、jQueryは必要ありません。「Google Mapsを遅れて読み込みたい」などといった場合に有用です。

サンプルデモ

LazyLoadFunctionのデモページ
LazyLoadFunctionのデモページ

テキストだけだと分かりづらいと思うので、下記のデモページをご覧下さい。このライブラリの特徴は、エレメントと関数を結び付けることです。エレメントが見えたタイミングで、関数が実行されるのを確認して下さい。ここでは3つのペアをエントリーしています。

デモを見る (VIEW DEMO)

ライブラリの入手

LazyLoadFunctionのライブラリは、下記より、ダウンロードして下さい。

ファイル一覧

SYNCER000706
lazyloadfunction.html Download
lazyloadfunction.js Download
lazyloadfunction-functions.js Download
fire-lazyloadfunction.js Download
lazyloadfunction.css Download
readme.txt Download

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

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

Download Zip

ダウンロードしたファイルを解凍して下さい。基本的に利用するのは、lazyloadfunction.jsだけで大丈夫です。他は全て、デモ用に用意されたファイルです。

SYNCER000676.zip

  • SYNCER000706
    • lazyloadfunction.js

プログラミング

それでは早速、LazyLoadFunctionを実装してみましょう。今回は、2つのエレメントと関数を結びつけてみましょう。

ライブラリの読み込み

まずはヘッダー内で、ライブラリのファイルを読み込んで下さい。

HTML

<head>
	<!-- JavaScriptの読み込み -->
	<script src="./lazyloadfunction.js"></script>
</head>

エレメントを用意する

続いて、「これが見えたら関数を実行する」というエレメントを配置しましょう。エレメントには、任意のid属性値を付けておいて下さい。ここでは、aaa、bbbというidを付けておきます。2つのエレメントは、離しておいた方が分かりやすいと思います。

HTML

<p id="aaa">id:aaa</p>

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<p id="bbb">id:bbb</p>

関数を用意する

次に、実行するための関数を用意して下さい。とりあえずは、簡単にアラートを表示しておけばいいですね。なお、LazyLoadFunctionを通して関数が実行された場合、引数に対象エレメントのノードを受け取ります。

JavaScript

function alert1( element ) {
	alert( "要素が見えましたー。その1" ) ;
}

function alert2( element ) {
	alert( "要素が見えましたー。その2" ) ;
}

エントリーする

ここから、LazyLoadFunctionをセットアップします。方法は簡単で、次のように、insert()メソッドに、id属性値と、関数名を指定して下さい。例えば、次のように指定することで、「id属性値がaaaのエレメントが画面に見えたら、関数alert1を実行する」というようにセットされます。

JavaScript

LazyLoadFunction.insert( {
	id: "aaa" ,	// エレメントのID名
	action: alert1 ,	// 実行したい関数名
} ) ;

今回は、2つのエレメントと関数を結びつけるから、次のようにinsert()メソッドを2回実行することになりますね。

JavaScript

// [#aaa]と[alert1]を結びつける
LazyLoadFunction.insert( {
	id: "aaa" ,	// エレメントのID名
	action: alert1 ,	// 実行したい関数名
} ) ;

// [#bbb]と[alert2]を結びつける
LazyLoadFunction.insert( {
	id: "bbb" ,	// エレメントのID名
	action: alert2 ,	// 実行したい関数名
} ) ;

もちろん、次のように、2つのエレメントに同じ関数をセットしても問題ありません。

JavaScript

// [#aaa]と[alert1]を結びつける
LazyLoadFunction.insert( {
	id: "aaa" ,	// エレメントのID名
	action: alert1 ,	// 実行したい関数名
} ) ;

// [#bbb]と[alert1]を結びつける
LazyLoadFunction.insert( {
	id: "bbb" ,	// エレメントのID名
	action: alert1 ,	// 実行したい関数名
} ) ;

実行する

仕上げです。エレメントと関数のエントリーが全て終了したら、最後にfire()メソッドを実行して、LazyLoadFunctionを起動して下さい。ここで初めて、各エレメントが見えた時に関数が実行されるようになります。引数には、対象エレメントが画面内にあるかチェックする頻度となるミリ秒数を指定することができます。何も指定しない場合、スクロールイベント中、250ミリ秒ごとにチェックします。

JavaScript

// LazyLoadFunctionを起動する
LazyLoadFunction.fire() ;

// チェックの頻度を縮めたければ、[10]などを指定する
// ただし、ブラウザの負担がその分、増えるのでご注意下さい
// LazyLoadFunction.fire( 10 ) ;

まとめ

ここまでの説明を整理すると、HTMLファイルは次のようになるはずです。JavaScriptを記述する順番を守りましょう。関数を定義していないうちに指定しようとするとエラーになってしまいます。

HTML

<html>
	<script src="./lazyloadfunction.js"></script>
</html>
<body>
	<p id="aaa">id:aaa</p>
	<p id="bbb">id:bbb</p>
	<script>
function alert1() {
	alert( "要素が見えましたー。その1" ) ;
}

function alert2() {
	alert( "要素が見えましたー。その2" ) ;
}

// [#aaa]と[alert1]を結びつける
LazyLoadFunction.insert( {
	id: "aaa" ,	// エレメントのID名
	action: alert1 ,	// 実行したい関数名
} ) ;

// [#bbb]と[alert2]を結びつける
LazyLoadFunction.insert( {
	id: "bbb" ,	// エレメントのID名
	action: alert2 ,	// 実行したい関数名
} ) ;

// LazyLoadFunctionを起動する
LazyLoadFunction.fire() ;
	</script>
</body>

オプション

LazyLoadFunctionは、次のようにinsert()メソッドの引数にオブジェクトリテラルを指定することで、ある程度の調整ができます。idとactionのみ、指定必須です。

JavaScript

LazyLoadFunction.insert( {
	id: "aaa" ,	// ID名
	action: read_google_maps ,	// シャッターをかけるクラス名
	offsetTop: 200 ,	// 上方向のオフセット値
	offsetBottom: 200 ,	// 下方向のオフセット値
	offsetLeft: 200 ,	// 左方向のオフセット値
	offsetRight: 200 ,	// 右方向のオフセット値
} ) ;

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

プロパティ名説明
idエレメントのid属性値。
actionエレメントが見えた時に実行する関数。
offset上下左右のオフセット値をまとめて指定する。例えば200pxを指定した場合、対象のエレメントが見える200px前の時点で関数が実行される。
offsetTop上方向のオフセット値。
offsetBottom下方向のオフセット値。
offsetLeft左方向のオフセット値。
offsetRight右方向のオフセット値。

メソッド

LazyLoadFunctionには、次のメソッドが用意されています。

メソッド名説明
insert( options )エレメントと関数のペアをエントリーに追加する。引数に、オプションオブジェクトを指定する。
fire( delay )起動する。引数に、チェックの頻度となるミリ秒数を指定できる。デフォルトでは250がセットされているが、これを1にすれば、チェックの頻度が高まるが、ブラウザにその分、負担がかかる。
destroy()エントリーを個別に破棄する。引数には、対象エレメントのid属性値を文字列で指定する。
destroyAll()全てのエントリーを破棄する。スクロールイベントも解除される。
check()各エレメントが見えているかチェックし、必要であれば関数が実行される。

例えば、エントリーしたエレメントと関数のペアを全て削除したい場合は、次のようにdestroyAll()メソッドを実行して下さい。

JavaScript

// LazyLoadFunctionを停止する
LazyLoadFunction.destroyAll() ;

id属性値がaaaのエレメントに設定したエントリーを削除したい場合は、次のようにdestroy()メソッドを実行しましょう。

JavaScript

// [#aaa]に設定したエントリーを破棄する
LazyLoadFunction.destroy( "aaa" ) ;