Javascriptでローディング画面を作りたい。

前提

Javascript（Vanilla）で初回（一回目）だけ表示されるローディング画面を作っています。
二回目以降のアクセス時に、Javascriptの構文が実行される前に、ローディングの要素が見えてしまいます。

実現したいこと

初回（一回目）だけ表示されるローディング画面を作りたい。
Javascriptの構文が実行される前に、ローディングの要素が見えてしまうのは避けたい。

該当のソースコード

HTML
1 <body>
2    <div class="page">
3
4      <div id="js-loading" class="js-loading">
5        <div class="js-loading__spinner"></div>
6      </div>
7
8      <!-- contens -->
9      <div class="page__inner">
10        <ul class="page__list">
11          <li class="page__item">
12            <img src="../images/PaulineLoroy/1.jpg" />
13          </li>
14          <li class="page__item">
15            <img src="../images/PaulineLoroy/2.jpg" />
16          </li>
17          <li class="page__item">
18            <img src="../images/PaulineLoroy/3.jpg" />
19          </li>
20          <li class="page__item">
21            <img src="../images/PaulineLoroy/4.jpg" />
22          </li>
23          <li class="page__item">
24            <img src="../images/PaulineLoroy/5.jpg" />
25          </li>
26          <li class="page__item">
27            <img src="../images/PaulineLoroy/6.jpg" />
28          </li>
29          <li class="page__item">
30            <img src="../images/PaulineLoroy/7.jpg" />
31          </li>
32          <li class="page__item">
33            <img src="../images/PaulineLoroy/8.jpg" />
34          </li>
35          <li class="page__item">
36            <img src="../images/PaulineLoroy/9.jpg" />
37          </li>
38          <li class="page__item">
39            <img src="../images/PaulineLoroy/10.jpg" />
40          </li>
41          <li class="page__item">
42            <img src="../images/PaulineLoroy/11.jpg" />
43          </li>
44          <li class="page__item">
45            <img src="../images/PaulineLoroy/12.jpg" />
46          </li>
47        </ul>
48      </div>
49　　</div>
50  </body>

CSS
1.js-loading {
2        width: 100vw;
3        height: 100vh;
4        background-color: black;
5        display: flex;
6        align-items: center;
7        justify-content: center;
8        /* important  */
9        position: fixed;
10        top: 0;
11        left: 0;
12        opacity: 1;
13        visibility: visible;
14        z-index: 9999;
15        transition: 1s;
16      }
17
18      .js-loaded {
19        opacity: 0;
20        visibility: hidden;
21      }
22
23      .js-loading__spinner {
24        width: 100px;
25        height: 100px;
26        background-color: white;
27        border-radius: 50%;
28      }

Javascript
1function loadPage() {
2        const loadingElm = document.querySelector("#js-loading");
3        loadingElm.classList.add("js-loaded");
4      }
5
6      if (!sessionStorage.getItem("access")) {
7        // Processing at first access
8        sessionStorage.setItem("access", "first");
9        window.addEventListener("load", function () {
10          setTimeout(loadPage, 2000);
11        });
12        setTimeout(loadPage, 5000);
13      } else {
14        // Processing on second and subsequent accesses
15        loadPage();
16      }

全体のコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="format-detection" content="telephone=no" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <link rel="stylesheet" href="reset.css" />
8    <link rel="stylesheet" href="layout.css" />
9    <!-- CSS -->
10    <style>
11      .js-loading {
12        width: 100vw;
13        height: 100vh;
14        background-color: black;
15        display: flex;
16        align-items: center;
17        justify-content: center;
18        /* important  */
19        position: fixed;
20        top: 0;
21        left: 0;
22        opacity: 1;
23        visibility: visible;
24        z-index: 9999;
25        transition: 1s;
26      }
27
28      .js-loaded {
29        opacity: 0;
30        visibility: hidden;
31      }
32
33      .js-loading__spinner {
34        width: 100px;
35        height: 100px;
36        background-color: white;
37        border-radius: 50%;
38      }
39    </style>
40  </head>
41
42  <body>
43    <div class="page">
44      <!-- loading -->
45      <div id="js-loading" class="js-loading">
46        <div class="js-loading__spinner"></div>
47      </div>
48      <!-- contens -->
49      <div class="page__inner">
50        <ul class="page__list">
51          <li class="page__item">
52            <img src="../images/PaulineLoroy/1.jpg" />
53          </li>
54          <li class="page__item">
55            <img src="../images/PaulineLoroy/2.jpg" />
56          </li>
57          <li class="page__item">
58            <img src="../images/PaulineLoroy/3.jpg" />
59          </li>
60          <li class="page__item">
61            <img src="../images/PaulineLoroy/4.jpg" />
62          </li>
63          <li class="page__item">
64            <img src="../images/PaulineLoroy/5.jpg" />
65          </li>
66          <li class="page__item">
67            <img src="../images/PaulineLoroy/6.jpg" />
68          </li>
69          <li class="page__item">
70            <img src="../images/PaulineLoroy/7.jpg" />
71          </li>
72          <li class="page__item">
73            <img src="../images/PaulineLoroy/8.jpg" />
74          </li>
75          <li class="page__item">
76            <img src="../images/PaulineLoroy/9.jpg" />
77          </li>
78          <li class="page__item">
79            <img src="../images/PaulineLoroy/10.jpg" />
80          </li>
81          <li class="page__item">
82            <img src="../images/PaulineLoroy/11.jpg" />
83          </li>
84          <li class="page__item">
85            <img src="../images/PaulineLoroy/12.jpg" />
86          </li>
87        </ul>
88        <p class="page__copy">
89          All Photo by Pauline Loroy -
90          <a href="https://unsplash.com/ja/@paulinel" target="_blank">
91            unsplash.com
92          </a>
93        </p>
94      </div>
95    </div>
96
97    <!-- javascript -->
98    <script>
99      function loadPage() {
100        const loadingElm = document.querySelector("#js-loading");
101        loadingElm.classList.add("js-loaded");
102      }
103
104      if (!sessionStorage.getItem("access")) {
105        // Processing at first access
106        sessionStorage.setItem("access", "first");
107        window.addEventListener("load", function () {
108          setTimeout(loadPage, 2000);
109        });
110        setTimeout(loadPage, 5000);
111      } else {
112        // Processing on second and subsequent accesses
113        loadPage();
114      }
115    </script>
116  </body>
117</html>