たまにしか動かないJavaScriptの記述

html,css,javascriptでウェブサイトを作っています。
ツールはAtoMで、テスト用のブラウザはChromです。
jQueryのバージョンは3.1.0です。

javascriptでページを読み込む際に、ページ全体をフェードインで表示する機能を実装中ですが、うまく動作できません。

JavaScript
1$(function(){
2  $('head').append(
3  '<style>body{display:none;}'
4  );
5  $(window).on("load", function() {
6  $('body').delay(50).fadeIn("slow");
7
8  //テスト用
9  alert('text');
10  });
11  //テスト用
12  alert('text02');
13});

実装したい動作
ページを読み込んだ時に、ページ全体をふわっと表示させたい。
そのため、現在はbodyをdisplay:noneで非表示にした後、fadeInで表示させている。

起こっていること
・ブラウザ(Chrome)及びツール(AtoM)で動作させたところ、きちんとフェードインする時と、bodyがdisplay:noneのまま動かない時とある。
・動く時と動かない時に規則性はないように見える。
・常にalert('text02')の後にalert('text');が表示される。

以上です。
不足情報等ございましたらご教示ください。
よろしくお願いします。

m.ts10806

2018/08/22 21:51

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

m.ts10806

2018/08/22 21:51

「jQuery」もタグに追加しておいてください。これに限らずフレームワークやプラグイン、ライブラリなどを利用されている場合は、独自の仕組みを利用いていたりして、元々の言語知識だけでは対応できないことも多いです。具体的なタグをつけることでより専門的な技術や知識をもった回答者の目にとまりやすくなりますので、工夫してみてください。 https://teratail.com/tags