Infinite Scroll がうまく動かない

前提・実現したいこと

HTML,CSS,JSをつかって、サイトを作っています。

フォルダに保存している画像を1度にすべて読み込まれるのではなく、下までスクロールされて初めて読み込まれるようにし、twitterやfacebookのように表現したいです。

サイトの見栄えを良くするために、infinite-scrollを使い無限スクロールを実現したいのですが、うまく行かずに困っています。

参考にしているサイト　→　http://saetl.net/javascriptsample/infinite%20scroll/howto.html

発生している問題・エラーメッセージ

Uncaught TypeError: $(...).infinitescroll is not a function
    at index.html:80
(anonymous) @ index.html:80

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3
4<head>
5  <link rel="stylesheet" href="./css/reset.css">
6  <link rel="stylesheet" href="./css/index.css">
7  <meta charset="utf-8">
8  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
9  <title>安い居酒屋を探すやつ</title>
10</head>
11
12<body>
13  <div class="wrap">
14    <div class="header">
15      <h1>一番安くビールが飲める場所</h1>
16    </div>
17    <div class="Description">
18      <h2>このサイトの使い方！</h2>
19      <p>簡単にこのサイトの使い方を説明します</p>
20      <p>マップを差し込むよりとりあえず説明文を入れるべきだと思った次第でございます</p>
21    </div>
22    <div class="Restaurant__List">
23      <ul class="Restaurant__wrapper">
24        <li class="Restaurant__Item">
25          <a href="./dummy_page1.html"><img class="Restaurant__ItemImg fadein" onclick="animation(this);" src="./img/top/dummy-top1.jpg" alt="dummy-top1"></a>
26        </li>
27
28　　　　～～省略～～
29
30        <li class="Restaurant__Item">
31          <a href="#"><img class="Restaurant__ItemImg fadein" onclick="animation(this);" src="./img/top/dummy-top8.jpg" alt="dummy-top8"></a>
32        </li>
33      </ul>
34    </div>
35    <p class="pagination">
36      <a class="next_item" href="./index2.html">next</a>
37    </p>
38  </div>
39  <script src="./js/lib/anime.min.js"></script>
40  <script src="./js/lib/infinite-scroll.pkgd.min.js"></script>
41  <!--<script src="./js/lib/jquery-3.4.1.min.js"></script>-->
42  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
43  <script type="text/javascript" src="./js/index.js"></script>
44  <script type="text/javascript">
45    $('.wrap').infinitescroll({　← エラーメッセージindex.html:80 の部分
46      navSelector: ".pagination", //リンクを囲む要素指定
47      nextSelector: ".pagination a", //リンク要素自体指定
48      itemSelector: ".Restaurant__List", //表示要素指定
49      dataType: "html", //'html'、'php'、'json' など、読み込み先ファイル形式指定
50      animate: true, //アニメーション処理
51      extraScrollPx: 150, //アニメーションスクロール量指定。デフォルト値150
52      bufferPx: 40, //次コンテンツロードタイミング指定
53      errorCallback: function() {}, //404エラー発生時処理
54      maxPage: undefined, //読み込み上限回数
55      loading: {
56        finished: undefined,
57        finishedMsg: "", //コンテンツ表示終了メッセージ
58        msg: null,
59        msgText: "", //ローディング中表示テキスト
60      },
61    });
62  </script>
63</body>
64</html>
65

読み込んでいるライブラリは

jquery-3.4.1.min.js
infinite-scroll.pkgd.min.js
anime.min.js
index.js

index.jsの中身はanime.jsを使ったものしか記載していません。

試したこと

上記の参考にしたサイト以外にも、

などをみて、色々書き換えて試してみましたが、同様のエラーメッセージを吐かれるかそもそも動かないで終わってしまいました。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1  <script src="./js/lib/infinite-scroll.pkgd.min.js"></script>
2  <!--<script src="./js/lib/jquery-3.4.1.min.js"></script>-->
3  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
4```↓ こうでは？
5
6```HTML
7  <script src="./js/lib/jquery-3.4.1.min.js"></script>
8  <script src="./js/lib/infinite-scroll.pkgd.min.js"></script>

投稿2020/03/24 18:17

kei344

総合スコア69407

Tamusu

2020/03/25 04:51

kei344さんこんにちはおっしゃって頂いたように変更を加えてみましたが、同様のエラーが同様の場所で発生し、改善は見られませんでした発生したエラー文 ``` Uncaught TypeError: $(...).infinitescroll is not a function at index.html:59 (anonymous) @ index.html:59 ``` jquery-3.4.1をコメントアウトしていたのはバージョンの違いでエラーが出てたらいけないと思い、参照したサイトに合わせたため、一時的にコメントアウトしてました。今朝から少し調べ直していて、 ```html $('.wrap').infinitescroll({ ``` の部分を ```html $('.wrap').infiniteScroll({ ``` と書き直したところ、 ``` infinite-scroll.pkgd.min.js:12 InfiniteScroll path option required. Set as: undefined s.updateGetPath @ infinite-scroll.pkgd.min.js:12 s.create @ infinite-scroll.pkgd.min.js:12 n @ infinite-scroll.pkgd.min.js:12 (anonymous) @ infinite-scroll.pkgd.min.js:12 each @ jquery-3.4.1.min.js:2 each @ jquery-3.4.1.min.js:2 h @ infinite-scroll.pkgd.min.js:12 l.fn.<computed> @ infinite-scroll.pkgd.min.js:12 (anonymous) @ index.html:59 infinite-scroll.pkgd.min.js:12 Disabling InfiniteScroll ``` という全く別のエラーが出てくるようになってしまいました…

kei344

2020/03/25 04:59

ローカルで動かしていませんか？（動かしているページのURLが「file:///」で始まっていませんか）【infinite scrollが動かない！と思ったら、めちゃくちゃくだらない理由だった件 - SublimeなLife日記】 https://sublimelife.hatenablog.com/entry/2015/04/11/115031

Tamusu

2020/03/25 07:55

こんにちは fileで動かしてました… ということで早急にxamppをインストールし、localhostで改めてファイルを開いて見ました。ですが上記と同じエラーが出てしまいました。。。 pathのことですごい怒られてるので、そもそも使い方がなっていないんだと思います。

kei344

2020/03/25 08:06

参考にしている記事とinfinite-scrollのバージョンが変わっていて、必要な設定が変わっているのかもしれませんね。【Infinite Scroll · Options】 https://infinite-scroll.com/options.html

Tamusu

2020/03/25 09:14

ありがとうございます。公式サイトを頼りにpathの設定を行いました。 $('.wrap').infiniteScroll({ path: 'index{{#}}.html', append: '.pagination', checkLastPage: '.pagination' }); と実行したら GET https://localhost/IzakayaSearch/SP/index3.html 404 (Not Found) となりました。おそらくcheckLastPageでの読み込み終了条件がうまく動いておらず、存在しないindex3.htmlを読み込もうとしちゃってます…

kei344

2020/03/25 09:35

path: '.pagination__next', にして、上記クラスを使った「次へリンク」を作るとか。

Tamusu

2020/03/25 12:26

遅くにすみません… やっとこさ動くようになりました…　ありがとうございました！解決方法を書くのが時間かかりそうなので先にお礼を伝えさせてもらいました。おっしゃって頂いたように、一度公式サイトと全く同じ書き方(class名やスコープも含めて)をした後に、変えても良い場所と駄目な場所を探っていました。お手数おかけしました

行動規範の内容に同意します