https://www.yamato2199.net/js/preloader.js

1// preloader.js
2
3// DOMContentLoadedイベントでプリローダーを作成してbodyに追加する
4document.addEventListener('DOMContentLoaded', function() {
5    var preloader = document.createElement('div');
6    preloader.id = 'preloader';
7    preloader.style.backgroundColor = "#000"; // プリローダーの背景色
8    preloader.style.position = "fixed";
9    preloader.style.top = "0";
10    preloader.style.left = "0";
11    preloader.style.width = "100%";
12    preloader.style.height = "100%";
13    preloader.style.zIndex = "9999";
14    preloader.style.display = "flex";
15    preloader.style.justifyContent = "center";
16    preloader.style.alignItems = "center";
17
18    document.body.appendChild(preloader);
19
20    var body = document.body;
21
22    // フェードインのために最初にbodyのopacityを0に設定
23    body.style.opacity = '0';
24    body.style.transition = 'opacity 1s ease'; // フェードインのトランジション
25
26    // リソースが完全に読み込まれた後にプリローダーを非表示にし、bodyをフェードイン
27    window.addEventListener('load', function() {
28        if (preloader) {
29            preloader.style.display = 'none';
30        }
31        if (body) {
32            body.style.opacity = '1'; // body 全体のフェードイン効果を発動
33        }
34    });
35
36    // フェールセーフとして、3秒後に強制的にプリローダーを非表示にし、bodyをフェードイン
37    setTimeout(function() {
38        if (preloader && preloader.style.display !== 'none') {
39            preloader.style.display = 'none';
40            body.style.opacity = '1'; // body 全体のフェードイン効果を発動
41        }
42    }, 3000); // 3000ms（3秒後）
43});