ホーム サンプルコード一覧 3. Lazy Loader

3. Lazy Loader

実現される機能

遅延読み込みを実現します。
Lazy Loaderを使用すると、任意の要素が画面内に入ってきた場合に、なんらかの非同期処理を実行させることができます。
そして、その処理が完了次第、また別の処理を実行させることができます。
画像の遅延読み込みや、APIへのアクセスが必要となるUIに対してこの仕組を応用することで、表示のパフォーマンスを上げることができます。

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

基本デモ - 遅延処理無し

このデモでは、ページ内に初めから猫の写真は存在しません。
該当の箇所までスクロールが発生した時に初めて、猫の写真が追加されます。

基本デモ - 画像プリロード

このデモでは、上記デモと同じように、ページ内に初めから猫の写真は存在しません。
該当の箇所までスクロールが発生した時、5枚の写真をプリロードします。
そして、プリロードが完了次第、猫の写真5枚がページに追加されます。 プリロードの間は、ローディング画像が表示されます。

基本デモ - APIアクセス

このデモでは、ページ下部に表が存在します。
その表は、はじめからページ内に存在しません。
そして、この表の内容は、APIにアクセスして取得する必要があるデータが含まれています。
Lazy Loaderを使い、該当の箇所までスクロールした時に初めてAPIへアクセスし、レスポンスを待ちます。
レスポンスが帰って来た時、帰って来たデータのuserIduserNameを、表にして表示しています。

組み込みデモ1 - 記事内の画像遅延読み込み

組み込みデモ2 - 写真一覧の画像遅延読み込み

組み込みデモ3 - ニュース一覧の画像遅延読み込み

各画像について、画像のプリロードを行ってから画像表示を行わせています。
それぞれの画像について、画像の読み込みが終わるまでは、ローディングのくるくるをCSSアニメーションで表現しています。

使用手順

1. ライブラリの読み込み

Lazy Loaderが依存する、以下のライブラリを読み込みます。

<script src="[yourDirectoryHere]/jquery.min.js"></script>
<script src="[yourDirectoryHere]/eveeve.min.js"></script>

この機能を実現するライブラリである su_enterLoader.js を読み込みます。

<script src="[yourDirectoryHere]/su_enterLoader.js"></script>

2. HTMLを準備

ページ内に入ったら処理を行わせるための要素等を、以下のように用意します。

<div class="su-enterLoader" id="test">
  <div class="su-enterLoader__loadingContainer"></div>
  <div class="su-enterLoader__completeContainer"></div>
  <script class="su-enterLoader__loadingSrc" type="text/x-enterLoaderSrc">
    読み込み中に表示する要素
  </script>
  <script class="su-enterLoader__completeSrc" type="text/x-enterLoaderSrc">
    読み込み完了時に表示する要素
  </script>
</div>

この要素がページ内に入った時、読み込み処理が行われます。
このソースコードにおいて、それぞれの要素は、以下を意味します。

.su-enterLoader (1)
全体を囲むコンテナです
.su-enterLoader__loadingSrc (2)
ページに入った時に行う非同期処理(つまり、なんらかのローディング処理)中に表示するコードを格納します
.su-enterLoader__completeSrc (3)
上記非同期処理が完了した時に表示するコードを格納します
.su-enterLoader__loadingContainer (4)
上記1のコードがappendされるコンテナです
.su-enterLoader__completeContainer (5)
上記2のコードがappendされるコンテナです

処理の流れとしては、以下のようになります。

  1. (1)がページ内に入ると
  2. (2)のコードが(4)にappendされます
  3. この時に指定された非同期処理が実行されます
  4. その非同期処理が完了した時、(3)のコードが(5)にappendされ、(4)は空になります

3. Lazy Loaderの実行

以下のように、Lazy Loaderを実行します。

$('#test').su_enterLoader({
  onEnter: function() {
    var d = $.Deferred();
    d.resolve(); // 何らかの非同期処理が完了時に実行
    return d.promise();
  }
});

Lazy Loaderは、jQueryプラグインsu_enterLoaderとして定義されています。
対象となる要素に対し、su_enterLoaderを実行すれば動作します。

この時、必ず指定しなければならないオプションは以下です

onEnter
該当の要素がページに入った時に実行させる非同期処理の関数を指定します。この関数は、jQueryのpromiseオブジェクトを返す必要があります。何らかの非同期処理の完了を、promiseのresolveで伝えます。このとき、resolveに文字列を渡すと、渡された文字列を、完了時のソースコードとして使用します。

より細かい設定方法

su_enterLoaderプラグインは、他に、以下のオプションを受け取ることができます。各オプションは、それぞれ以下のような機能を持ちます。それぞれの使用方法については、各デモを参照してください。

useThrottle
throttle処理を行うか否かをtrue及びfalseで指定します。
throttle_millisec
throttleの秒数(ミリ秒)を指定します。
onInit
su_enterLoaderの実行時に一度だけ実行される関数を指定できます。初期化処理等をさせたいときに使用します。
onComplete
onEnterの完了時に実行させる処理を指定できます。デフォルトとして、ローディングコンテナを空にし、完了コンテナにソースを差し込む処理が書かれています。
selector_loadingSrc
非同期処理中に表示するコードを格納する要素のセレクタを指定します。初期値は’.su-enterLoader__loadingSrc’です
selector_completeSrc
非同期処理完了時に表示するコードを格納する要素のセレクタを指定します。初期値は’.su-enterLoader__completeSrc’です
selector_loadingContainer
上記、selector_loadingSrcに指定したコードが格納されるコンテナのセレクタです。初期値は’.su-enterLoader__loadingContainer’です
selector_completeContainer
上記、selector_completeSrcに指定したコードが格納されるコンテナのセレクタです。初期値は’.su-enterLoader__completeContainer’です
loadingSrc
非同期処理中に表示するコードを直接文字列として指定できます。初期値はnullです
completeSrc
非同期処理完了時に表示するコードを直接文字列として指定できます。初期値はnullです