Tumblr にオートロード機能を付ける

スマートフォンで Tumblr を開くと [Load more posts] というリンクがあり選択すると次のポストを読み込んでくれます。
パソコンのブラウザでの閲覧時にもこの機能が欲しかったのと、自分の気に入った Theme でも使えるようにしたかったので一から書きました。

こちらの Tumblr で実際に動かしています。
http://poochin.tumblr.com/

注意点など。

1. JavaScript のコードは head, body タグのどちらかに追加してください。
2. 一番下までスクロールした時に読み込みを開始します。

カスタム theme に追加する JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  var viewing_page = false; // ページごとに表示している
  var cur_page = 1; // 現在のページ
  var loading = false; // ロード中かのフラグ、多重ロード防止用
  
  var pathname = window.location.pathname;
  var page_reg = pathname.match(/\/(page\/(\d+))/);
  
  if (pathname == '/' || (page_reg && page_reg.length >= 2))
    viewing_page = true;
  if (page_reg && page_reg.length == 3)
    cur_page = page_reg[2];
  
  if (viewing_page == false) return; // ページごとの表示でない場合は以下は不必要
  
  var loadingSuccess = function (data) {
    loading = false;
    $('#now_loading').animate({opacity: 'toggle'});
    $('.post', $(data)).insertAfter('.post:last');
  };
  
  $(window).scroll(
    function() {
      if (loading) return; // 既にロード中の場合はロード処理に移させない
      
      /* 一番下までスクロールした場合 */
      if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
        loading = true; // 多重ロードさせない
        $('#now_loading').animate({opacity: 'toggle'});
        $.get('/page/' + (++cur_page), {}, loadingSuccess); // loading next page
      }
    }
  );
});
</script>

カスタム theme に追加する HTML

<div id="now_loading" style="display: none; width: 100%; z-index: 1; position: fixed; top: 50%; margin-top: -1em; padding: 0.5em; background: #fff; text-shadow: 1px 1px 3px #000; font-size: 60px; text-align: center; ">Loading next posts...</div>

動作は Google chrome 7, Firefox 3.5 で確認しました。