jQuery「$.get()」を使ってページ最下部で追加データを取得

TwitterやFacebookのように一番下までスクロールしたら自動的に追加データを読み込んで表示する機能を実装した時のソースをメモ。
サンプルはデータベース（Mysql）から10件づつデータを抽出。

HTML

<ul class="items">
<?php
require_once ('ini.php'); //DB接続ファイル
$sql = $db->query('SELECT * FROM tbl_sample ORDER BY id DESC LIMIT 10');
while($row = $sql->fetch(PDO::FETCH_ASSOC)){
	echo('<li id="'.$row['id'].'">'.($row['name']).'</li>');
}
?>
</ul>

jQuery

$(window).on('scroll', function(){
	var doch = $(document).innerHeight(); //ページ全体の高さ
	var winh = $(window).innerHeight(); //ウィンドウの高さ
	var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置
	if(bottom * 0.9 < $(window).scrollTop()){
		var obj = $(this);
		if (!obj.data('loading')) {
			obj.data('loading', true);
			$.get('loadmore.php', {lastid:$('ul.items li:last-of-type').attr('id')}, function(result){
				$('ul.items').append(result);
				obj.data('loading', false);
			});
		}
	}
});

スクロール時のイベントの重複防止に、最初にイベントが発生した時点でのみobj.dataの「loading」をtrueに設定。

• TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

PHP （loadmore.php）追加読み込み用ファイル

//追加読み込みの処理
require_once ('ini.php'); //DB接続ファイル
$lastid = $_GET['lastid'];
if(!empty($lastid)){
	$sql = $db->prepare('SELECT * FROM tbl_sample WHERE id < :id ORDER BY id DESC LIMIT 10');
	$sql->bindValue(':id', $lastid, PDO::PARAM_INT);
	$sql->execute();
	while($row = $sql->fetch(PDO::FETCH_ASSOC)){
		echo('<li id="'.$row['id'].'">'.($row['name']).'</li>');
	}
}