もはや、タイトルが日本語として正しいのかどうかも分からないくらい、JavaScriptが苦手ですが、社内システムを使ってもらうため、果敢に挑戦中です。
弊社では、過去の図面を検索するときに、WEBにPDFを埋め込んで検索結果として表示していますが、検索結果が多いと、PDFを開くのに時間がかかってしまい、待ちくたびれてしまうので、今回タイトルにあるように、jQueryとInfinite Scrollを使って、小分けにして読み込むように改修しました。
なぜInfinite Scrollを使うのでしょうか？
それは、「無限スクロール」で検索したら、ぽろぽろヒットしてきたからです。「Infinite Scrollなんて今さら・・・」みたいな情報も見た気がしますが、お構いなしです。今どきのやり方は見つけられなかったし・・・。とりあえず、機能が実現できればいいかなということで。
で、WEB上のサンプルコードにお世話になりながら、社内システムにコードを追加して動かしてみましたが、全く動きません！Chromeの「検証」で確認してみると「infiniteScrollなんて関数定義されてないよ」的なエラーを出していました。結構、悩んでいましたが、一向に動く気配を見せないので、Infinite Scrollの公式サイト（英語）を見たら、あっさり解決してしまいました。
いつからか知りませんが、 infiniteScrollで指定するOptionの名称が変わっているようで、それが原因のようです。私が参考にしていたサンプルコードはちょっと古かったようで、公式サイト（英語）のサンプルを参考にしたら動いてくれました！
というわけで、備忘録代わりに。
まずは、HeaderタグにjQueryとInfinite Scrollのjsファイルを指定してあげて、
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
Bodyタグの最後の方にInitialize処理を記述してあげます
<script>
$('.container').infiniteScroll({
// options
path: 'getDrawDataAsyncInfinite.php?page={{#}}', //スクロールしたら読み込む要素とかファイル名とか関数とか。{{#}}を使うと1ずつ増えていきます。左のサンプルでは「getDrawDataAsyncInfinite.php?page=1」、「getDrawDataAsyncInfinite.php?page=2」、「getDrawDataAsyncInfinite.php?page=3」・・・となっていきます。
append: '.scroll_post', //出力する要素。<div class="scroll_post">...</div>となっていれば、この範囲内を表示してくれます。
checkLastPage: '.pagination__next', //ここで指定した要素が存在するかどうかで、最後のページかどうかチェックしてくれます。
});
</script>他にも便利なOptionがあるので、Infinite Scroll – Optionsを参考にしてください。
あとは、指定した内容に沿って、htmlやPHPを編集します
...
<div class="scroll_post">
...//この部分がスクロールしていくと表示されます
if ( ここが最後のページでなければ ) {
//checkLastPageで指定したクラスのタグを出力しておきます。
<p><a class="pagination__next" href="getDrawDaraAsyncInfinite.php"></a></p>
//Pathにファイル名を指定した場合は、hrefの内容は適当でOKです。
}
</div>私の英語に対する苦手意識のせいで、時間を浪費してしまいました。英語もっと頑張ります。・・・頑張りたい。
