先日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。
5回目はコンテンツの終わりまで読み込むと次のコンテンツを自動的に読み込む仕組み、通称「autoload」とか「autopager」とか言われている仕組みの実装です。
基本的な考え方
必要になる技術・概念は次の通りです。- コンテンツの終わりの座標（縦位置）を取得する
- 今現在どの座標（縦位置）まで表示したかを取得する
- 次に表示すべきコンテンツを取得して（Ajax）表示する
簡単なサンプルコードは次のページにわかりやすくまとめられているので参考にしてみてください。
jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み) | ゆるぶ | ページ 513
「feedpost」での実装
こんな感じ。
上で挙げたサンプルと違うのは取得を開始する位置が「コンテンツ下辺から2,000px」とだいぶ離れている点（サンプルでは「10px」）。これはダッシュボードを取得するTumblrのAPIが余り早くないことと、画像など高さのある記事が多いことを考慮しての設定です。一般的には表示が残り件程度になったら発動くらいに設定しておけば良いかと。記事の平均の高さが100pxだったら500pxとか。
次のコンテンツを取得して読み込む処理
特筆すべきことはあんまり無いと思います。
取得に成功したら、コンテンツの最後に追加。
自動読み込みされたコンテンツでもJavaScript処理を行いたいときは
ここを参考にイベントの設定を行うと良い。JQueryでbindの代わりにonを使うとAutoPagerize対応が捗った – まちゅダイアリー(2013-02-11)
やり方としては、次の2つ。
- bindを使って$(document)に紐付ける
- onを使って$(document)経由で要素に紐付ける
1つ目の例はキーボードショートカット。これは自動読み込みされたコンテンツでも動く。
2つ目の例はpost/reblog。これは自動読み込みされたコンテンツでも動くけれど、
これは動かない。
僕自身「.bind()」と「.on()」の使い分けについて十分に理解しているわけでは無いのですが、これに関しては先に挙げた参考サイトの記述で「何に設定してどういう仕組みで動くか」が解り嵌まらなくて済みました。なるほどね。
