画面スクロールでコンテンツを追加読込するjavascript -knockout編-
本章では、画面を最下段までスクロールした際に、リスト型のコンテンツを追加読込するjavascriptの書き方について、共有します。
リスト型コンテンツの表示方法
リスト型コンテンツ追加読み込みの実装方法
実装のポイント
読み込みする際に、以下のポイントに注意して実装しましょう。
- ページ遷移が発生しないよう、非同期処理でコンテンツを読み込むこと
- ターゲットとするブラウザの仕様に注意し、画面スクロールの計算式を組むこと
- 別の非同期処理が走っていないこと
- 全コンテンツがロードされた場合、ロードしないこと
サンプルスクリプト
以下に、サンプルのスクリプトを示します。
// knockout.jsのviewModel var viewModel = { contentsList: ko.observableArray(), }; // 読み込み中フラグ var skipFlg = false; // ロード済件数 var loadedCount = 0; // コンテンツの総数 var maxContentsCount = 2000; // コンテンツ読み込み変数 // 画面最下段までスクロールされた場合に、非同期で読み込まれていないコンテンツの一覧を取得する $(window).scroll(function (ev) { if (skipFlg && loadedCount < maxContentsCount) { if ($(window).scrollTop() == $(document).height() - $(window).height()) { skipFlg = false; $.ajax({ type: "POST", contentType: "application/json", // コンテンツ読み込み先URL url: "/Contents/Load", data: JSON.stringify({ loadedCount: loadedCount, }) }).done(function (result) { $(result).each(function (index, element) { // 読み込み先から得たコンテンツをviewModelに追加する。 viewModel.contentsList.push({ name: element.Name, url: element.Url, }); }); skipFlg = true; }).fail(function (ex) { skipFlg = true; }); } } });