スクロールによる自動読み込みの実装

#09 スクロールで自動読み込みしよう
http://dotinstall.com/lessons/more_php_v2/21809
を参考に
スクロールによる自動読み込みを実装する

これは twitter とか facebook で
下につくと自動的に読み込んでくれるのと同じような仕組み
これがあると、いちいちボタンをクリックする手間がかからないので楽になる

まず、index.html でボタン部分をコメントアウト

そして java script の click イベントも使わないので
とりあえずコメントアウト

コメントアウト部分は

$('#more').click(function(){
                               $('#loading').show();
                        
                       if($('#tweets > li').length){
                       max_id = $('#tweets > li:last').attr('id').replace(/^tweet_/,'');
                       }
                       //console.log(max_id);
 
                               $.get('more.php',{max_id:max_id},function(rs){
                                       $('#loading').hide();
                                       $(rs).appendTo('#tweets');      
                               });
                       });

になる

そして、新しくスクロールのためのユーザ関数を作成

function more(){
                 $('#loading').show();
                         
                  if($('#tweets > li').length){
                        max_id = $('#tweets > li:last').attr('id').replace(/^tweet_/,'');
                    }
 
                  $.get('more.php',{max_id:max_id},function(rs){
                        $('#loading').hide();
                        $(rs).appendTo('#tweets');      
                   });
        }

とりあえず、これでページを読み込んだら
more() を実行すれば、今までと同じように
つぶやきを取得して表示する

more();

を
$(function(){}のスコープ内の最後あたりに
追記すればOK

スコープの外に書くと動作しないので注意

ページをリロードして、ボタンがなくなっていること
そして、自動でつぶやきを取得できていれば成功

ここまでできたら、いよいよスクロールしたら読み込む機能を実装する

これは

$(window).scroll(function(){
 
});

というように
jQueryの scroll() を使う

scroll() は
http://semooh.jp/jquery/api/events/scroll/fn/
にあるように
スクロールしたときの動作を指定する

行う処理は
もし、window のスクロールトップとウインドウの高さがドキュメントの高さと同じになったら
ユーザ関数 more() を呼ぶ

windowのスクロールトップは

1	`$(window).scrollTop()`

ウインドウの高さ
は

1	`$(window).height()`

ドキュメントの高さは

1	`$(document).height()`

でそれぞれ取得できるので

この判定は

if($(window).scrollTop() + $(window).height() == $(document).height()){
more();
}

と書くことができる

スクロールしたときの処理まで書くと

$(window).scroll(function(){
        if($(window).scrollTop()+$(window).height() == $(document).height()){
                more();
        }
});

となる

PCブラウザだとフルスクリーンだとスクロールできないときがあるので
そのときにはフルスクリーンではなく
画面を小さめにしてスクロールするようにすれば
自動読み込みを実感できる

これにさらに視覚効果でふわっとなる
ようにするには

1	`$(rs).appendTo('#tweets');`

のところへ

1	`.hide().fadeIn(800)`

を追加することで
一度表示を消して
0.8秒かけて表示されるように演出できる

ちなみに、fadeIn() は
http://semooh.jp/jquery/api/effects/fadeIn/%5Bspeed%5D%2C+%5Bcallback%5D/
の解説にあるように
非表示になっている要素をフェードイン表示する関数
設定する時間はミリ秒単位になる

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル