FANCOMI Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・新規事業のエンジニア・技術ブログ

jQueryでTwitter風のスクロール自動読み込み

ADN事業部のh_nagayamaと申します、よろしくお願いいたします。 今回は「twitter風に、スクロールした時に次のコンテンツを自動で追加表示する」 という改修を行った際に使用したjQuery.Bottomプラグインの導入例を、 いくつか調査した内容と合わせて投稿します。

■概要 jQuery.Bottomで行っていること ・scrollイベントが発生する都度、(指定した)全体の高さと現在の位置を取得して ・現在の位置が(指定した)末尾に到達または超えた時に、bottomというイベントを発生させます

■導入手順 1. githubからpluginをダウンロード https://github.com/jimyi/jquery_bottom 2. 処理を記述 githubのdemoを参照にしています、jquery1.3.2で動作することを確認済です。

[js] <script type="text/javascript" src="">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> <script type="text/javascript" src="/jquery.bottom-1.0.js"></script>

$(document).ready(function(){

// proximityはbottomイベントを発生させる位置を調整する値です $(window).bottom({proximity: 0.01});

// 今回はwindowオブジェクトを指定していますが // scrollイベントが機能する要素(frameなど)を指定することも可能です $(window).bind('bottom', function() { // ↓↓ ここ以降にイベントが発生した時に実行する処理を書きます var obj = $(this);

// bottomイベントは、スクロールされる度に
// 何度も発生してしまいます
// そのため、このloadingというフラグを使って
// 重複処理を避けているようです
if (!obj.data('loading')) {
  obj.data('loading', true);

// 読み込み中の画像を表示
$('#loading').html('&lt;img src=&quot;/loading.gif&quot; /&gt;');

setTimeout(function() {

  // ここにajax()やgetJSON()など
  // 実際に次のコンテンツを取得する処理を記述します

  // 読み込み中の画像を削除
  $('#loading').html('');
   obj.data('loading', false);

}, 2000);

} return false; }); }); [/js]

これで期待していた動作にはなりましたが、テストを進めていく中で発生した問題の対策で若干追加の記述を入れました。

・問題1 次ページのコンテンツをajax通信で取得していましたが 手元の環境では、loadingフラグを設定していても重複処理が発生してしまったため、 別途「ajax通信が既に存在している時は処理を終了」の記述を入れました。

[js] if ( jQuery.active != 0 ) { return false; } [/js]

・問題2 コンテンツの最大件数を超えた時でも読み込み中画像(loading.gif)が表示されていたので、 別途「現在の表示件数と最大表示件数を都度比較し、最大件数を超えた場合には bottomイベントをunbindする」の記述を入れました。

[js] $(window).unbind('bottom'); [/js]