jQueryで、$(window).on('load', function())が機能しません。

Question

###前提・実現したいこと
jQueryで、$(window).on('load', function())が機能しません。

###発生している問題・エラーメッセージ
CSSのアニメーション機能を使用して、ロード画面の作成を試みていますが、
$(window).on('load', function())が機能せず、alertも表示されません。

エラーメッセージは特に表示されません。

###該当のソースコード

<div id="loading">
  <div id="loading-circle"></div>
</div>
```JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript"> var userAgent = window.navigator.userAgent.toLowerCase(); // IEでもEdgeでもない場合にロード画面を表示 if (userAgent.indexOf('msie') < 0 && userAgent.indexOf('trident') < 0 && userAgent.indexOf('edge') < 0) { $(function() { var h = $(window).height(); $('#wrap').css('display','none'); $('#loading').height(h).width(100%).css('display','flex'); $('#loading-circle').css('display','inline'); }); $(window).on('load',function(){ alert('loading...'); $('#loading-circle').fadeOut(slow); $('#loading').fadeOut(slow); $('#wrap').css('display','block'); }); } </script>

```CSS
/* loading background */
#loading {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 padding-top: 100px;
}

/* loading circle */
#loading-circle {
 -o-animation: spin 0.9s infinite linear;
 -moz-animation: spin .9s infinite linear;
 -ms-animation: spin .9s infinite linear;
 -webkit-animation: spin 0.9s infinite linear;
 animation: spin 0.9s infinite linear;
 border: 5px solid #663300;
 border-radius: 50%;
 border-right-color: transparent;
 border-right-width: 1px;
 box-sizing: border-box;
 height: 100px;
 width: 100px;
}

/* keyframe anime */
@-webkit-keyframe spin {

 from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
 }

 to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
 }

}

@keyframes spin {

 from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
 }

 to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
 }

###試したこと
window.onload=function()を試しましたが、やはりalertが表示されず、機能していないようです。

###補足情報(言語/FW/ツール等のバージョンなど)
Chromeで検証しました。
ご助言いただけましたら幸いです。
どうぞよろしくお願いいたします。

Answer 1

エラーメッセージは特に表示されません。

エラーメッセージがどこに表示されるかは把握されていますか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

---

ざっと見ましたが、引き数の扱い部分に問題があります。

// .width(100%)
// ↓
   .width( '100%' )

// .fadeOut(slow);
// ↓
   .fadeOut( 'slow' );

Comments

[mamiko-k]

ありがとうございました。
引き数を修正したところ、解決いたしました。