loding画面を表示させたいのですが、onloadを使用したら何も表示されません。。。

イメージとしては、
ページ全体が読み込まれるまで１枚の画像を表示させておき、
読み込み完了とともに全体のdisplay:none;を解除。
加えてloading画像をdisplay:none;にしようと考えています。

勉強不足だと思いますが、わかる方ぜひお力添え頂きたいです。。

javascript
1window.onload = function () {
2  document.getElementById("loading").classList.remove("active");
3  document.getElementById("main-contents").classList.remove("passive");
4};

html
1<body id="body">
2
3    <div id="loading" class="active">
4      読み込み完了まで表示
5      <img src="image/title-logo.png" alt="" />
6    </div>
7
8    <div id="main-contents" class="passive">
9     読み込み完了後表示
10　　</div>
11</body>
12

css
1body{
2width: 960px;
3height: 1000px
4}
5
6#loading.active {
7    // width: 100%;
8    // height: 100vh;
9    margin: 50vh auto 0;
10    transform: translateY(-50%);
11    //場面幅縦中央にそろえる場合vhビューポートを使用
12    //少し下に表示されるので、transform: translateY(-50%);で修正
13
14    img {
15      display: block;
16      width: 287px;
17      margin: 0 auto;
18    }
19  }
20
21  #loading {
22    display: none;
23  }
24
25  #main-contents.active {
26    display: none;
27  }

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

回答1件

cssの記述がありませんが、cssは設定しているのでしょうか？
css無しにclassをaddしたりremoveしても見た目上は何も起こりません。

css
1#loading,
2#main-contents {
3  display: none;
4}
5
6
7#loading.active,
8#main-contents.active {
9  display: block;
10}
11

追記

css以外も修正されると困りますが、修正前のコードであれば上に掲載したcssで表示非表示は実現できています。

active / ~~passive~~deactive形式にするなら以下のようなコードになります。
（最小のCSSのみ記述しています）

html
1<body id="body">
2  <div id="loading" class="active">
3    読み込み完了まで表示
4    <img src="image/title-logo.png" alt="" />
5  </div>
6
7  <div id="main-contents" class="deactive">
8    読み込み完了後表示
9  </div>
10</body>

css
1.active {
2  display: block;
3}
4
5.deactive {
6  display: none;
7}

js
1window.onload = function() {
2  const loading = document.getElementById("loading")
3  const mainContents = document.getElementById("main-contents")
4
5  loading.classList.remove("active");
6  loading.classList.add('deactive');
7  mainContents.classList.remove("deactive");
8  mainContents.classList.add('active');
9};

今後も使うのならば関数化しておいたほうが良いです。

js
1window.onload = function() {
2  const loading = document.getElementById("loading")
3  const mainContents = document.getElementById("main-contents")
4  setDeactive(loading)
5  setActive(mainContents)
6};
7
8
9function setActive(element) {
10  toggleActive(element, true)
11}
12
13function setDeactive(element) {
14  toggleActive(element, false)
15}
16
17function toggleActive(element, setActive) {
18  if (!element) return
19  if (setActive) {
20    element.classList.add('active')
21    element.classList.remove("deactive");
22  } else {
23    element.classList.add("deactive");
24    element.classList.remove('active')
25  }
26}