safari, firefox でオーバーレイの画像をロード後、fadeOutできない jQuery

前提・実現したいこと

safari, firefox でも jQueryのコードを作動させたい。

ここに質問の内容を詳しく書いてください。
画面いっぱいにロゴを表示させ、画面をロード後、2.2秒かけてfadeOutする動きをつけたいのですが、safariとFirefoxではfadeOutされず、いつまでもロゴが画面に残ったままになってしまいます。リロードしても変わらずfadeOutすることはありません。
※どういうタイミングかはわからないのですが、たまにsafariでもfirefoxでもリロードをすると動くことが有るのですが、大体動きません。

どういう状況なのかわかるようにコードの内容と同じサイトをアップしております。
こちらから問題をご確認していただけますと幸いです。(Chrome と　Edgeでは問題なく動作します。SafariとFirefoxが動きません。)
リンク内容

ChromeとMicrosoft Edgeでは問題なく、fadeOutします。

コンソールを見ても、エラーメッセージは表示されておりません。

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

エラーメッセージ

なし

該当のソースコード

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/func.js"></script> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>About</title>
  <meta name="description" content="XXXXXX">    
<link href="https://fonts.googleapis.com/css?family=Philosopher&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
 <!-- オーバーレイ -->
    <div id ="overlay">
      <img src="images/BlueTree-logo-white.png" alt="ローディング用ロゴ" id="loading">
  </div>
</body>
</html>

該当のソースコード

jQuery


// ロード終了後、オーバーレイ非表示
$(function(){
  $(window).on("load", function(){
    $("#overlay").fadeOut(2200)
  }); 
  });

該当のソースコード

CSS


#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #fff;
}

試したこと

他にもtoggleやスムーススクロールのjqueryのコードが合ったので、どこかで競合しているのかと思い、全部、削除してみましたが、結果は変わりませんでした。

FirefoxでjQueryが動かない原因の1つが「head部分の宣言抜け」です。headタグに以下のjavascript宣言が入っていないと、コードを記述してもjQueryは動作しません。とあったので以下をheadに記述しましたが、Firefoxでもsafariでも動きませんでした。
<meta http-equiv="Content-Script-Type" content="text/javascript">

他にもググってみましたが、具体的な解決策を見つけることができませんでした。

補足情報（FW/ツールのバージョンなど）

safariのバージョン：13.0.5 (15608.5.11)
Firefoxのバージョン：75.0　Firefox Release　April 7, 2020　←　最新と出ていました。
コーディングはvscodeでしております。

ご回答いただけますと幸いです。
何卒よろしくお願いいたします。

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

回答1件

ベストアンサー

$(function(){});はDOMContentLoadedのタイミングで実行されるので、loadとほぼ同時に実行されているのでは。（loadイベントはロード後に設定しても発報しない）

js
1// $(function(){
2  $(window).on("load", function(){
3    $("#overlay").fadeOut(2200)
4  }); 
5//   });

また直接は関係ありませんが、実際のコードが下記のようになっており、id="loading"が重複しています。

HTML
1 <!-- オーバーレイ -->
2    <div id ="overlay">
3      <div id="loading"></div>
4      <img src="images/BlueTree-logo-white.png" alt="ローディング用ロゴ" id="loading">
5  </div>

投稿2020/04/19 19:14

kei344

総合スコア69606

penny271

2020/04/19 21:07

ご回答ありがとうございます！上記のようにしたところ、だいぶ改善されたのですが、１０回に2、３回ほど、safariとfirefoxで動かないことがありました。 ”loadとほぼ同時に実行されているのでは。”というお言葉をヒントに、delayを直前につけることで live server上でも、サーバー上でも問題なく動作させることができました。 $(window).delay(800).on("load", function(){ $("#overlay").fadeOut(2200) }); 自分では解決できず、色々思考錯誤し、時間がかかっていた問題だったので、本当に解決してくださり感謝しております。スッキリしました！ありがとうございました！

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