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