HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-1-8.css">body内に無限スクロールをさせたいコンテンツのHTMLを記載します。
<div class="wrapper">
<ul class="article-list"><!--無限読み込みをさせたい要素を囲う親のクラス名をarticle-listに指定-->
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
<div class="navigation"><a href="page-2.html">続きを表示</a></div><!--クリックするボタンのクラス名をnavigationに指定-->
</div>そのHTMLをコピーして、2 ページ目以降に読み込みたいHTMLをつくります。
その際、HTMLの名前を任意の名前＋数字（例：page-2.html、page-3.html）にします。
<div class="navigation"><a href="page-2.html">続きを表示</a></div>
<!--2ページ目以降はリンク先の数字の部分が自動的に連番が付与されて読み込まれます-->body 終了タグ直前に jQuery、Infinite Scroll、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
<!--自作のJS-->
<script src="js/9-1-8.js"></script>
CSSの書き方
/*ローディングが表示されるエリアの設定*/
#infscr-loading {
width:100%;
text-align:center;
margin:20px auto;
}
#infscr-loading img{
width:30px;/*ローディング画像のサイズ*/
}
JSの書き方
//無限読み込みInfiniteScroll
$('.article-list').infinitescroll({ //無限読み込みをさせたい要素を囲う親のクラス名を指定
navSelector : ".navigation",//次のページを読み込むリンクを囲んでいるクラス名を指定
nextSelector : ".navigation a",//次のページにリンクする要素を指定
itemSelector : ".article-list li",//無限スクロールで表示をさせたい要素を指定
maxPage : 3,//読み込む全体のページ数。入れないと連番でURLが読まれて404エラーが出る
animate: true, //アニメーション処理を行う
loading: {
finishedMsg: "全ての記事が読み込まれました", //全ての要素が読み込まれた後の終了メッセージ
msgText: "読み込み中", //ローディング中の表示テキスト
img: 'svg/loading.svg', //ローディング中の画像を指定
},
},
function(newArticle) {
$(newArticle).hide().delay(100).fadeIn(900); // 0.9秒かけてフェードイン
$(".navigation").appendTo(".wrapper").css("display","block"); //navigationをwrapperの一番最後に移動して表示
});
//ボタンをクリックしたら表示する設定
$('.article-list').infinitescroll('unbind');//初期値にもどして
// ボタンをクリックしたら要素を表示。ボタンのリンク機能は無効
$(".navigation a").click(function(){
$('.article-list').infinitescroll('retrieve');
return false;
});