Q&A実現したいこと
jQueryでローディング画面を実装しようと思っています
発生している問題
初めのロード時は問題無いのですが、リロードするとローディング画面以外のbody内コンテンツが読み込まれなくなります。
状況
初学者です。
<body>直後にローディング画面用の要素を配置、 それ以外のbody内要素はid="wrap"で包み、 初期状態は"wrap"を非表示 → on( ‘load’ )で"表示、といった感じにしています。ちなみに何回リロードしても、ロード画面(class="load")は毎回読み込まれます。ただ、wrapで包んだ要素が表示されなくなります。
PCから見ると、chromeは問題無いみたいですがsafari、Firefoxでうまくいきません。
履歴を削除したらどうなるか確認してみたところ、cookieを削除すると状況がリセットされるところまでわかりましたが、実装するにあたって望ましいコードがわからなくなりました。
リロードしてもローディング画面表示 → wrap内要素表が行える方法がおありでしたらご教示いただきたく思います。
該当のソースコード
HTML
1<body> 2 <div class="load"> 3 <div class="load__animation">Now Loading...</div> 4 <img src="ローディング画像のパス" alt="ローディング画像"> 5 </div> 6 7 <div id="wrap"> 8 <!-- この中にページ内のコンテンツ --> 9 </div> 10</body>
jQuery
1$(function(){ 2 var h = $(window).height(); //ブラウザウィンドウの高さを取得 3 $('#wrap').css('display','none'); //初期状態ではメインコンテンツを非表示 4 $('.load , .load__animation').height(h).css('display','block'); 5 //ウィンドウの高さに合わせでローディング画面を表示 6}); 7$(window).on('load', function () { 8 $('.load').delay(1000).fadeOut(1000); 9 $('.load__animation').delay(1000).fadeOut(1000); 10 $('#wrap').css('display', 'block'); 11 // ページ読み込みが終わったらメインコンテンツを表示する 12});
補足情報（FW/ツールのバージョンなど）
確認OS ：MacOS Catalina
バージョン：10.15.2
回答1件
0
自己解決
自己解決しました。
jQuery
1$('#wrap').css('display','none'); //初期状態ではメインコンテンツを非表示
ここを削除したらいけました。
投稿2020/01/02 06:43
総合スコア12
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。