【jQuery】LoadingOverlay ～ 二度押し防止のためにオーバーレイ画面を表示する ～

jQuery

 ■ はじめに

オーバーレイ画面を表示するツールを探していた。
jQuery LoadingOverlayが見つかったので、メモる。

 ■ 公式サイト

jQuery LoadingOverlay

https://gasparesganga.com/labs/jquery-loading-overlay/
 デモ
https://gasparesganga.com/labs/jquery-loading-overlay/#examples
 特徴
https://gasparesganga.com/labs/jquery-loading-overlay/#features

 * Font Awesome とも組み合わせ可能

 ライセンス
https://github.com/gasparesganga/jquery-loading-overlay/blob/master/LICENSE

 * MIT (商用利用可能)

 ■ サンプル

例１：Hello World 

<!doctype html>
<html lang="jp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- Font Awesome v5.2 -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <button id="helloworld" class="btn">Click Me!</button>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <!-- jQuery LoadingOverlay -->
    <script src="https://cdn.jsdelivr.net/jquery.loadingoverlay/latest/loadingoverlay.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("#helloworld").on('click', function(){
              console.log("Hi!");
              // Show full page LoadingOverlay
              $.LoadingOverlay("show");
              
              // Hide it after 3 seconds
              setTimeout(function(){
                  $.LoadingOverlay("hide");
              }, 3000);
          });
      });
    </script>
  </body>
</html>

例２：Font Awesome 

<!doctype html>
<html lang="jp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- Font Awesome v5.2 -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Font Awesome</title>
  </head>
  <body>
    <button id="helloworld" class="btn">Click Me!</button>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <!-- jQuery LoadingOverlay -->
    <script src="https://cdn.jsdelivr.net/jquery.loadingoverlay/latest/loadingoverlay.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("#helloworld").on('click', function(){
              console.log("Hi!");
              // Show full page LoadingOverlay（★ 変更部分 ★）
              $.LoadingOverlay("show", {
                  image       : "",
                  fontawesome : "fas fa-sync-alt fa-spin"
              });
              
              // Hide it after 3 seconds
              setTimeout(function(){
                  $.LoadingOverlay("hide");
              }, 3000);
          });
      });
    </script>
  </body>
</html>

 補足：実用上のコードについて

* 上記はあくまで参考用のコードで、実際には、submitイベントで以下のようにする

コード抜粋 

<script>
$(function() {
  $("form").on('submit', function(){
     $.LoadingOverlay("show");
  });
});
</script>

 ■ 注意

 * jQueryのslim版だと動かなかった
 * 以下に置き換えると、以下「エラー内容」がコンソールログ上に表示され、動かない
～～～～～
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
～～～～～

 エラー内容 

ボタン押下後、以下のエラーが表示

loadingoverlay.min.js:8 Uncaught TypeError: o.hide(...).appendTo(...).fadeIn is not a function
    at C (loadingoverlay.min.js:8)
    at Function.A.LoadingOverlay (loadingoverlay.min.js:8)
    at HTMLButtonElement.<anonymous> (index.html:28)
    at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)

 調査結果 

jQuery LoadingOverlay は、内部でfadeIn を使ってそうだが、
jQueryのslim版だと、該当関数がない？

https://stackoverflow.com/questions/45645772/jquery-fadein-is-not-a-function

The default template for Bootstrap 4 uses th "slim" version of jQuery which doesn't include many functions.
 You need to switch back to using a more featured version.

 参考文献

https://torina.top/detail/329/