jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み)


画面下までスクロールすると次のページを読み込んでくれるヤツですね。
イロイロ見てると次のような考え方みたいす。

対象コンテンツの下端の位置座標が表示エリア(ウィンドウ下端)に近づいたら、続きを読み込みます。これを、ウィンドウをスクロールした時にチェック。

まず、コンテンツの下端の位置座標を求める。対象エリアの id 属性が target なら、以下。

1
var contentBottom = $('#target').offset().top + $('#target').height();

offset().top で対象がページの一番上からどの高さにあるかがわかるので、これに対象の高さ height() を足して求めます。

次に、今どの位置までウィンドウに表示されているか求める。

1
var displayBottom = $(window).scrollTop() + $(window).height();

スクロール位置 scrollTop() にウィンドウの高さ height() を足せば、どこまで表示されているかがわかります。

あとは、画面スクロール時に両者を比較して次のページを読み込むか判断します。まあ、あんまりギチギチにしても仕方ないので、10px(超適当っす)くらい余裕をもたせることにします。

1
2
3
4
5
$(window).scroll(function(){
    if (contentBottom - displayBottom < 10){
        // ページ読み込み
    }
});

スクロールされてから画像をあとで読み込むヤツも同じコトしてるのかもね。それはまた今度。
サンプル

2011.04.21追記
スクロールイベントに登録した処理が複数読み込まれないよう排他制御入れました。詳しくはサンプルみてね。

「jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み)」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です