オートページャーの最小実装

オートページャー系のjQueryプラグインは沢山あるが実装が気に食わないのでいつも自作してる。

とはいえ秘伝のソース状態ではよくないと思いいくつか機能を捨ててコンパクトにまとめた。

jQuery依存バージョン

特徴

• if (loading) { return } の様な読み込み中判定を書かなくても良い安心設計
• 滅多に使わないので .stop などループ停止のメソッドも用意しない
• 発火閾値は残りスクロールエリアがウィンドウサイズ未満で発火（貪欲）

使用例

$(function () {

  // autopager() 実行後1回だけ発火
  var page = 1;
  $(document).on('autopager', function () {

    // 1回しか発火しないので読み込み中の判定などしなくてよい

    $.ajax(
      url: '/api/item/search',
      data: { page: page },
      dataType: 'json'
    ).done(function (data) {

      // DOMの追加処理

      // 次のページがある時は autopager() を叩く
      if (data.hasNext) {
        autopager();
      }
    });
  }).trigger('autopager'); // 初回読み込みは明示的にイベント発火
});

jQuery非依存バージョン（おまけ）

使用例

window.onload = function () {
  var page = 1;
  var loadpage = function () {
    if (hasNext) {
      page++;
      autopager(loadpage);
    }
  };
  loadpage();
};