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;
});
});