JavaScript 预加载器无法正常工作

Question

我一直在做一个网站，最近我决定在我的网站上安装一个预加载器。我已准备就绪，但控制装载程序的 JavaScript 似乎不起作用。

这是我的代码：

代码比较多，我上传到JSFiddle 这里是 https://jsfiddle.net/mvc2fe1a/1/

<div class="spinner-wrapper">
    <div class="spinner">
        <svg width="634" height="62" viewBox="0 0 634 62" fill="none" xmlns="http://www.w3.org/2000/svg">
...
        </svg>

    </div>
    </div>

.spinner-wrapper {
    height: 100%;
    width: 100%;
    background: #333;
    position: absolute;
    top: 0;
    left: 0;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

function loadPage() {
    let timeout = setTimeout(showPage, 3000);
}

function showPage() {
    document.querySelector('.spinner-wrapper').style.display = 'none'
    document.querySelector('.container').style.display = 'block'
}

但是这段代码不起作用，我做错了什么？

Answer 1

您需要调用 loadPage 函数。现在，你只是定义了它。

// other code
loadPage();

Answer 2

您忘记调用 loadPage() 函数

我编辑了你的Fiddle： https://jsfiddle.net/woma7h83/

JavaScript 预加载器无法正常工作

JavaScript Preloader Not Working Properly

html

javascript

css

loading

preloader