R4

Webサービス レビュー * R4  

ページスクロールで最下部まで行くと次の何件を読み込むAjax処理(オートロード)

2012年5月28日 Tag:JavaScript Text by 伊藤

このエントリーをはてなブックマークに追加

twitterやfacebookのタイムラインにも実装されている、ページスクロールで最下部まで行くと次の何件を読み込む方法の紹介です。jQueryを使います。

<script src="jquery.js"></script>
<script>
var s = 0;
$(window).scroll(function() {
var total = $(document).height();
var position = $(window).scrollTop() + $(window).height();
if(position >= total - 100){
s = Number(s+10);
$("次の何件を表示させたい所").load("読み込むファイル?num="+s);
}
});
</script>

ドキュメント自体の高さと、スクロール量+ウィンドウの高さを比較して、最下部まで来たら、load() で次の何件を読み込むファイルを呼び出します。変数sは次の何件の引数です。

if(position >= total – 100){ の所で -100 としているのは、ピッタリ最下部ではなく、その直前くらいで呼び出すだめの数値なので適宜調整ください。

また、load() だと html() のように上書きになるので、実際には load() の前に append() で新しい入れ物を作って、そこに load() するイメージでしょうか。

※ご利用は自己責任でお願いします。

Latest

Pickup

Category

koyomi

4db

Twitter