jquery 無限スクロール jscroll コンテンツを自動読み込み　autoTrigger:true　としたら、　最初に全てのページを読み込んでしまう。

お世話になっております。
プラグイン　jScroll を用いております。

そもそも自分が勘違いしているかもしれませんが、　autoTrigger:trueで全部読んでしまいます。ページを５ページ用意していたら５ページ共先に読んでしまう感じです。
autoTrigger:false では確かに読まずに、　次のページを読む、などで止まります。　クリックするとページ遷移をするのでなく、
下に連なっていくので成功はしていると思います。

しかしやりたいのは、　ページの下部までスクロールをしてきたら・・・　　読み込み！

下部までスクロールをしてきたら・・・・・　　　　　読み込み！

の繰り返しのはずであって、　全部読み込んでしまっては、　スクロールのたびに読んでこそ負担も軽いのに、いかがすればよろしいでしょうか・・・・・。

以下はほぼ現物としてPHPで処理したいので、　phpとパンを焼いたがうんぬんと書いてある文もそのままで私のファイルそのままを一応掲載させて頂きました。これをtop2.php のみ変えて、　ファイルをtop5.php くらいまで作ってあります。

PHP
1<?php
2echo '
3<html>
4<head>
5
6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" />
7<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
8<script  type="text/javascript" src="jquery.jscroll.min.js"></script>
9
10</head>
11<body>
12
13<div class="jscroll">
14    <article class="content">
15        <header>
16            <h1>ホームべ・アシ・カリーの日常</h1>
17        </header>
18        <section>
19            <p>今日もパンを焼い<br>た。<br><br>そう、俺の名はホームべ・アシ・カリー、パンを焼くことが生きがいのしがない旅人さ。</p>
20        </section>
21        <footer>
22            <a class="jscroll-next" href="top2.php">次の記事へ</a>
23        </footer>
24    </article>
25</div>
26<script type="text/javascript" >
27var jscrollOption = {
28    loadingHtml: \'読み込み中\',
29    autoTrigger: true,
30    padding: 20,
31    nextSelector: \'a.jscroll-next\',
32    contentSelector: \'.jscroll\'
33}
34
35$(\'.jscroll\').infinitescroll(jscrollOption);
36</script>
37</body>
38</html>
39
40';
41
42?>

いかがすれば、スクロールしてきたら・・　読み込む。　　スクロールしてきたら・・　読み込むと　いう風にできますでしょうか・・・。すみません；；。

neko_daisuki

2020/12/05 07:43

head で jQuery がふたつ読みこまれてしまっています。ひとつだけにすると変化はありますか？ jquery.jscrollを試してみたのですが、infinitescrollというメソッドが見つかりませんでした。 https://github.com/pklauzinski/jscroll これとは別のjquery.jscrollをご利用でしょうか？