jquery.infinitescroll をクリックで読み込む(改)

jquery.infinitescroll をクリックで読み込む方法はこちらが詳しいです。

【jQuery】無限スクロール[Infinite Scroll]を極限までカスタマイズ。

だけど、この方法のままだともう読み込むものが無い状態でも、「続きを見る」が表示され、クリックした後に読み込むものが無いことがわかる、というちょっと不親切な状況になってしまいます。
なので、ちょっと改善。
(変更したのはグレーのハイライト部分です)
読み込むページ数を指定して、そのページ数を読みきったらボタンを非表示にしてしまいます。

<script src="js/jquery.infinitescroll.min.js"></script>
$(function(){
	//ページ数を増やしたらpageMaxの数字を変更する
	var pageMax = 5;
	var pageNow = 1;
	$('#thanks .clearfix').infinitescroll({
		navSelector  	: '#infinitBox .btn',
		nextSelector 	: '#infinitBox .btn',
		itemSelector 	: '#infinitBox ul li',
		dataType		: 'html',
		loading: {
			finishedMsg: '<p class="loadingMessage">全ての画像を読み込みました!</p>',
			img: 'img/loading.gif',
			msgText: '<p class="loadingMessage">画像を読み込み中です</p>',
			speed: 'fast'
		}
	},
	function(newElements) {
		$(newElements).hide().delay(100).fadeIn(600);
		if (pageMax <= pageNow+1) {
			$btn.hide();
		} else {
			pageNow ++;
			$("#infinitBox .btn").appendTo("#infinitBox .wrap").delay(300).fadeIn(600);
		};
	});
	$('#infinitBox .clearfix').infinitescroll('unbind'); // 初期化
	$("#infinitBox .btn").click(function(){
		$('#infinitBox .clearfix').infinitescroll('retrieve');
		return false;
	});
});

投稿者:

ayako0802

フロントエンドエンジニア