fakeLoaderが作動しない。

jQueryプラグインのfakeLoaderが作動しません。

html
1 <meta name="viewport" content="width=device-width, initial-scale=1" />
2    <link rel="stylesheet" href="css/reset.css" />
3    <link rel="stylesheet" href="css/style.css" />
4    <link rel="stylesheet" href="css/slick.css" />
5    <link rel="stylesheet" href="css/slick-theme.css" />
6    <link rel="stylesheet" href="css/drawer.min.css" />
7    <link rel="stylesheet" href="css/lightbox.css" />
8    <link
9      href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css"
10      rel="stylesheet"
11    />
12    <link rel="stylesheet" href="css/fakeLoader.css" />
13  </head>
14
15  <body>
16    <div class="myLoader"></div>
17（以下略）
18
19
20    <script
21      src="https://code.jquery.com/jquery-3.4.1.js"
22      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
23      crossorigin="anonymous"
24    ></script>
25    <script
26      src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"
27      type="text/javascript"
28    ></script>
29    <script src="js/iscroll.js"></script>
30    <script src="js/drawer.min.js"></script>
31    <script src="js/lightbox.js"></script>
32    <script src="js/slick.min.js"></script>
33    <script src="js/smooth-scroll.min.js"></script>
34    <script src="js/fakeLoader.min.js"></script>
35    <script src="js/script.js"></script>
36  </body>
37</html>

js
1$(function() {
2  $(".slider").slick({
3    dots: true,
4    autoplay: true,
5    autoplaySpeed: 3500
6  });
7
8  $("#responsive").on("click", function() {
9    $("#js_modal").fadeIn();
10  });
11
12  $("#js_btn").on("click", function() {
13    $("#js_modal").fadeOut();
14  });
15
16  $(".myLoader").fakeLoader({});
17});
18
19$(document).ready(function() {
20  var pagetop = $(".pagetop");
21  $(window).scroll(function() {
22    if ($(this).scrollTop() > 1000) {
23      pagetop.fadeIn();
24    } else {
25      pagetop.fadeOut();
26    }
27  });
28  pagetop.click(function() {
29    $("body, html").animate(
30      {
31        scrollTop: 0
32      },
33      500
34    );
35    return false;
36  });
37
38  var scroll = new SmoothScroll('a[href*="#"]');
39  header: "[data-scroll-header]";
40});

検証ツールで確認したところ、

Uncaught TypeError: $(...).fakeLoader is not a function
at HTMLDocument.<anonymous> (script.js:16)
at mightThrow (jquery-3.4.1.js:3557)
at process (jquery-3.4.1.js:3625)

と記述されておりました。

試したこととしては、
・<script src="js/fakeLoader.min.js"></script>
の記述場所をhead内に変えてみる。
・jsファイルの

$(".myLoader").fakeLoader({});

を(function($){ … }(jQuery)) で囲ってみる。

・jQueryのバージョンを変えてみる。
・fakeLoaderのバージョンを変えてみる。

など、試しましたがどれも反応なしです。

画面上でもなんの反応もなく、fakeLoaderが起動しない状態です。

プラグイン同士のコンフリクトが原因でしょうか？
ご確認よろしくお願い致します。

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

回答1件

ベストアンサー

「fakeLoader」が下記ライブラリなら、使用方法が違います。

【GitHub - joaopereirawd/fakeLoader.js: fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.】
https://github.com/joaopereirawd/fakeLoader.js/