ローディング画面タグの表示非表示を切り替えてもブラウザに描画されない

実現したいこと

重たい処理を行うJavaScriptソースがあり、処理中はブラウザにローディング画面が表示されるようにしたいです。
ローディング画面自体はindex.htmlにタグとして直書きしておき、デフォルトで当該タグに非表示を示すクラスを付与しておきます。
重たい処理開始時に当該タグから非表示クラスを削除してローディング画面を表示、処理完了時に非表示クラスを再付与してローディング画面を非表示にする仕組みです。
ローディング画面表示/非表示の切り替え、および重たい処理はそれぞれ非同期処理として記述しています。
（重たい処理中にブラウザの画面描画が止まってしまうことを避ける意図です。）
なお、ローディング画面はスクリプトを使わず、タグとCSSのみで円がクルクル回るアニメーションを作成して実現しています。

発生している問題

非表示クラスを削除してもローディング画面が表示されません。
しかし内部的には表示されているもののブラウザ上で描画が為されていない状態のようで、デバッガを使って処理をステップ実行すると、ローディング画面の表示/非表示がちゃんと切り替わります。
どうすればローディング画面の表示をブラウザにリアルタイムに反映できるのでしょうか？

該当のソースコード

index.html

HTML
1<html>
2<head>
3</head>
4
5<body>
6
7<!-- CSSファイルを読み込む。 -->
8<link href="css/main.css" rel="stylesheet" type="text/css">
9
10<!-- JSファイルを読み込む -->
11<script src="js/main.js"></script>
12
13<!-- ローディング画面領域 -->
14	<div class="loadingArea displayNon layout subWindow loadingModal">
15		<div class="loadingBlock">
16			<div class="loadingContents">
17			</div>
18		</div>
19	</div>
20
21
22<!-- 処理 -->
23<script>
24
25	/*
26	 * 実処理開始
27	 */
28	//処理クラスをインスタンス化
29	var obj = new processClass();
30
31	//init呼び出し
32	obj.init();
33
34	//run呼び出し
35	obj.run();
36
37</script>
38
39</body>
40</html>
41

main.js

JavaScript
1/*
2 * クラス定義
3 */
4function processClass ( ){
5
6	//init処理完了を知らせるセマフォに用いる
7	this.initFinished = false;
8}
9
10/*
11 * init(初期化処理)定義
12 */
13processClass.prototype.init = function(){
14
15	//ローディング画面を出す
16	const showLoading = async() =>  {
17		//ローディング画面を出すために、ローディング画面タグの非表示マーククラスを削除して見えるようにする
18		$('.loadingArea').removeClass('displayNon');
19	}
20
21	//非同期のinit処理の定義
22	const initProcess = async() =>  {
23		//init処理を実施する
24		
25		
26		～～～　省略　～～～
27		
28		
29		
30		//init終了とする
31		this.initFinished = true;
32    };
33
34	//ローディング画面表示を実行
35	showLoading();
36	//init処理を実行
37	initProcess();
38	
39}
40
41/*
42 * run(本処理)定義
43 */
44processClass.prototype.run = function(){
45	//initが終了するまでブロッキングする処理の定義
46	const waitInitProcess = async() => {
47		//init終了まで待つ
48		while(this.initFinished === false){
49			;
50		}
51	}
52
53	//非同期のrun処理の定義
54	const runProcess = async() =>  {
55
56		//init終了まで待機
57		await waitInitProcess();
58
59		//run処理を実施する
60		
61		
62		～～～　省略　～～～
63		
64		
65	};
66
67	//run処理実行と実行後の処理
68	runProcess().then(()=> {
69		// 非同期処理が成功したときの処理
70		//ローディング画面を消す
71		$('.loadingArea').addClass('displayNon');
72	}).catch(() => {
73		// 非同期処理が失敗したときの処理
74		//ローディング画面を消す
75		$('.loadingArea').addClass('displayNon');
76	});
77}

main.css

CSS
1.layout.subWindow.loadingModal {
2    z-index: 99;    /* 奥行。ベースを拡張。メインコンテンツ(z-index0)より後に描画する。 */
3    background-color: rgba(204,204,204,0.8);    /* 背景色。グレーベースの不透明度0.8で描画する。 */
4}
5
6.loadingBlock {
7    position: absolute;    /* ポジション指定。ウインドウに対して必ず上下左右中央揃えにする。 */
8    top: 50%;    /* 上位置。上下中央となるようウインドウの50%位置に配置する。 */
9    left: 50%;    /* 左位置。左右中央となるようウインドウの50%位置に配置する。 */
10    transform: translate(-50%, -50%);    /* 空間指定。上下左右中央揃えにするため、要素の高さと幅の50%分上と左位置を調整する。 */
11}
12
13.loadingContents {
14    width: 100px;    /* 横幅。100pxとする。 */
15    height: 100px;    /* 縦幅。100pxとする。 */
16    border-radius: 50%;    /* 角の丸め。50%とする。 */
17    border: solid 4px;    /* ボーダー。4pxの線とする。 */
18    border-color: #000000 #00000010 #00000010;;    /* ボーダー色。三等分とする。 */
19    position: relative;    /* ポジション指定。子要素群を相対位置指定可能とする。 */
20    animation-name: spin;    /* アニメーション名。Spinとする。定義は別とする。 */
21    animation-duration: 1s;    /* アニメーション時間。1秒間でアニメーションする。 */
22    animation-iteration-count: infinite;    /* アニメーション間隔。無限とする。 */
23    animation-timing-function: linear;    /* アニメーション動作。等速で動作する。 */
24}
25
26.displayNon {
27    display: none;    /* ブロックレイアウト。指定した領域を非表示にする。 */
28}

試したこと

下記URLに「requestAnimationFrame()を2回呼び出すとよい」とあったため、ローディング画面から非表示クラスを削除した直後に行ってみましたが、変化有りませんでした。
https://qiita.com/kerupani129/items/3d26fef39e0e44101aad

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

ブラウザ：Chrome バージョン: 110.0.5481.104

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

回答1件

div要素のstyle属性にdisplay:noneが指定されている状態で、ロード画面を表示したいときはstyleを空に、非表示に戻したいときはstyle属性にdisplay:noneを再度代入すればよいです。

(サンプルHTML)

html
1<html>
2	<head>
3	</head>
4
5	<body>
6
7	<!-- CSSファイルを読み込む。 -->
8	<link href="css/main.css" rel="stylesheet" type="text/css">
9
10	<!-- JSファイルを読み込む -->
11	<script src="js/main.js"></script>
12
13	<button id="display" onclick="display()">表示する</button>
14	<button id="non-display" onclick="nonDisplay()">表示しない</button>
15
16	<!-- ローディング画面領域 -->
17	<!-- getElementsByClassNameだと都合が悪いのでgetElementByIdで取得できるようにid属性を追加 -->
18	<!-- 非表示のためにstyle属性でdisplay:noneを指定 -->
19	<div class="loadingArea" id="loadingArea" style="display:none">
20	<div class="loadingBlock">
21		<p>LOADING!</p>
22	</div>
23	</div>
24
25	<!-- 処理 -->
26	<script>
27
28		var loadingArea = document.getElementById("loadingArea"); //ロード画面のdivエレメント取得
29	
30		//表示する
31		var display =()=>{
32			loadingArea.style = "" //display:noneを消去
33		}
34                //非表示にする
35		var nonDisplay =()=>{
36			loadingArea.style = "display:none" //display:noneを付与
37		}
38	</script>
39
40</body>
41</html>

投稿2023/02/23 05:52

編集2023/02/23 06:15

task58

総合スコア26

eleele28

2023/02/23 07:16

display:noneのCSSをあてるためのクラスの付与/削除ではなく、直接タグにstyle属性にてdisplay:noneをつけたり削除したりする、ということですね。試してみましたが変化有りませんでした。（ご教示頂いた方法だと、「class属性をあてるか、style属性をあてるか」という手順が違うだけで、根本的な方法としては同じような気もします。）